Боковая панель Flexbox угловая 5

Question

Я создаю простое демонстрационное приложение в angular 5, используя материал 2. Я пытаюсь создать панель управления для своего собственного демонстрационного приложения, используя flexbox. Я создал боковую панель, но я застрял, мне интересно, как я могу создать аккордеонное меню на моей боковой панели с иконкой, и это слишком отзывчиво. Я хочу создать боковую панель следующим образом: https://www.kode.to/preview/QEZKyA

пока я сделал это:

home.component.html

      <mat-toolbar class="mat-elevation-z2">
        <button mat-icon-button>
       <mat-icon>menu</mat-icon>
  </button>
  <div class="branding">
    <div class="compName">Demo</div>
  </div>
  <div class="search-bar" fxFlex>

  </div>

  <button [matMenuTriggerFor]="user" mat-icon-button class="ml-xs">
    <mat-icon>person</mat-icon>
  </button>

  <mat-menu #user="matMenu" x-position="before">
    <button mat-menu-item>
      <mat-icon>settings</mat-icon>
      Settings
    </button>
    <button mat-menu-item>
      <mat-icon>account_box</mat-icon>
      Profile
    </button>

    <button mat-menu-item>
      <mat-icon>exit_to_app</mat-icon>
      Sign Out
    </button>
  </mat-menu>
</mat-toolbar>

<!-- here i was trying to create my sidebar with accordion menu -->
<div class="flexsidebar">

</div>

home.component.scss

mat-toolbar {
    padding: 0 8px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 65px;
    background-color: #3f51b5;
    color: white; //box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    z-index: 9;
    .branding {
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: auto 0;
        line-height: 50px;
        padding: 0 64px 0 16px;
        .compName {              
            font-size: 20px;
            font-family: 'Roboto Mono', monospace;
            margin: auto;
        }
    }
}

.flexsidebar {
    position: fixed;
    width: 280px;
    left: 0;
    margin: 0;
    display: flex;
    background-color: white;
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    padding-bottom: 60px;
    background-color: #fff;
    overflow-y: auto;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

Как создать боковую панель с меню, как указано выше? и как мне создать область контента, где мой маршрутизатор будет отображать мой контент? Я в замешательстве, ну, я не великий дизайнер, но я стараюсь изо всех сил. Кто-нибудь, пожалуйста, помогите мне. Любая помощь будет высоко ценится