I am looking to align the titles on the left side. I suspect that the issue lies in this particular line of code. Can someone help me identify which properties I should adjust to resolve this problem?
https://i.sstatic.net/XWCsd.png
Interestingly, the icons are correctly positioned within the layout.
CSS
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: space-between;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081D45;
}
.sidebar .nav-links li a:hover {
background: #081D45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 1rem;
left: auto;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
HTML
<ul class="nav-links">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<a class="item" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i>
<span class="links_name">{{ menu.name }}</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul
class="submenu"
#submenu
[ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } "
>
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }} "
><span class="links_subname">{{ submenu.name }}</span>
</a>
</li>
</ul>
</ng-container>
</li>
</ul>
If you would like to see a live demonstration, please visit this Stackblitz link => Stackblitz.
Your assistance and insights are greatly appreciated!