I would like to get this result:

For now, I don't have much...

I don't understand why I don't have a gray line that separates each menu title? And the arrows are not aligned correctly?

I tried several things but I give up, the elements are still not aligned and the border-bottom does not appear on each title.

  @import url(https://fonts.googleapis.com/css?family=Open Sans);
    @import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    h1 {
        font-size: 58px;
    }
    
    h2 {
        font-size: 30px;
    }
    
    ul {
        list-style-type: none;
    }
    
    .sidebar {
        position: fixed;
        height: 100%;
        width: 250px;
        background: #239cd3;
        transition: all 0.5s ease;
    }
    
    
    /* LOGO */
    
    .sidebar .logo-details {
        height: 100px;
        display: flex;
        align-items: center;
    }
    
    .sidebar .accordion {
        font-size: 18px;
        color: white;
        border-bottom: 1px solid #ccc;
        padding: 15px 15px 15px 25px;
    }
    
    .sidebar .accordion li i.fa-chevron-down {
        right: 1rem;
        left: auto;
    }
    
    .sidebar .accordion li.active i.fa-chevron-down {
        transform: rotate(180deg);
    }

    <div  style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }">
        <div  style="border-bottom: 1px solid black;">
            <span >
          </span>
        </div>
        <ul id="accordion" >
            <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
                <ng-container>
                    <div  (click)="selectMenu(menu)">
                        <i [class]="menu.iconClass"></i> {{ menu.name }}
                        <i ></i>
                    </div>
    
                </ng-container>
            </li>
        </ul>
    </div>

The project is here.

Thanks for your help and your time.

CodePudding user response：

Concerning the grey divider line and the padding I think this rule...

.sidebar .accordion {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

...should be changed to have a different selector which doesn't apply to the ul , but to its li children:

.sidebar .accordion > li {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

Concerning the alignment of the downward arrows you could apply display: flex and justify-content: space-between to the .menu elements which are children of the li elements addressed with the CSS rule above, plus apply margin-left: auto;to its last child (= the down-arrow) to have everything before that left-aligned and the arrow right-aligned. In other words, add this:

.sidebar .accordion > li .menu {
    display: flex;
    justify-content: space-between;
}
.sidebar .accordion > li .menu > i.fa.fa-chevron-down {
    margin-left: auto;
}

CodePudding user response：

@import url(https://fonts.googleapis.com/css?family=Open Sans);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: 58px;
}

h2 {
    font-size: 30px;
}

ul {
    list-style-type: none;
}

.sidebar {
    position: fixed;
    height: 100%;
    width: 250px;
    background: #239cd3;
    transition: all 0.5s ease;
}


/* LOGO */

.sidebar .logo-details {
    height: 100px;
    display: flex;
    align-items: center;
}

.sidebar .accordion {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}
.sidebar .accordion > li {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}
.sidebar .accordion > li .menu {
    display: flex;
    justify-content: space-between;
}
.sidebar .accordion > li .menu > i.fa.fa-chevron-down {
    margin-left: auto;
}

.sidebar .accordion li i.fa-chevron-down {
    right: 1rem;
    left: auto;
}

.sidebar .accordion li.active i.fa-chevron-down {
    transform: rotate(180deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./navbar.css">
</head>
<body>
  <div  style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }">
    <div  style="border-bottom: 1px solid black;">
        <span >
      </span>
    </div>
    <ul id="accordion" >
        <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
            <ng-container>
                <div  (click)="selectMenu(menu)">
                    <i [class]="menu.iconClass"></i> {{ menu.name }}
                    <i ></i>
                </div>

            </ng-container>
        </li>
    </ul>
</div>
</body>
</html>