src/app/navbar/navbar.component.html

<div class="flex-container" fullscreen>
<mat-toolbar class="my-toolbar">
  <div>
    <div class="search2">
  <ul id="menu" class="menu1">
    <li>
      <button mat-icon-button (click)="sidenav.toggle()" class="dropdown-button">
        <mat-icon class="fineract-toolicon">menu</mat-icon>
      </button>
    </li>
    <li>
      
      <span style="color:purple">Tenant Name</span>
    </li>
    <li>
     
      <button mat-button [matMenuTriggerFor]="client" class="dropdown-button"> 
        <mat-icon>group</mat-icon>Clients
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #client="matMenu">
        <a mat-menu-item [routerLink]="['/navbar/manage_members']">Client</a>
        <a mat-menu-item [routerLink]="['/navbar/group']">Group</a>
        <a mat-menu-item [routerLink]="['/navbar/center']">Center</a>
      </mat-menu>
    </li>
    <li>
      <button mat-button  [routerLink]="['/navbar/accounting']"  class="dropdown-button">Accounting
      </button>
    </li>
    <li>
      <button mat-button [matMenuTriggerFor]="report" class="dropdown-button">Reports
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #report="matMenu">
        <a mat-menu-item [routerLink]="['/navbar/reports/allreports']">All</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/clients']">Clients</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/loans']">Loans</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/savings']">Savings</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/funds']">Funds</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/accounting']">Accounting</a>
        <a mat-menu-item [routerLink]="['/navbar/reports/xbrl']">XBRL</a>
      </mat-menu>
    </li>
    <li>
     
      <button mat-button [matMenuTriggerFor]="admin" class="dropdown-button">
         <mat-icon>build</mat-icon>Admin
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #admin="matMenu">
        <button mat-menu-item [routerLink]="['/navbar/user']">Users</button>
        <button mat-menu-item [routerLink]="['/navbar/organisation']">Organisations</button>
        <button mat-menu-item [routerLink]="['/navbar/system']">Systems</button>
        <button mat-menu-item [routerLink]="['/navbar/admin/products']">Products</button>
        <button mat-menu-item [routerLink]="['/navbar/admin/templates']">Template</button>

      </mat-menu>
    </li>

  </ul>
  </div>
  <div class="search1">
  <ul id="menu">
    <li>
      <input placeholder="click or press alt + X to Search" type="text" class="fineract-toolsearch">
    </li>
   
    <li class="dropdown-button">
      <button mat-icon-button [routerLink]="['/navbar/notification']">
        <mat-icon>notifications</mat-icon>
      </button>
    </li>
    <li>
      <button mat-button [matMenuTriggerFor]="mifos" class="dropdown-button">Fineract CN
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #mifos="matMenu">
        <button mat-menu-item><mat-icon>help</mat-icon>Help</button>
        <button mat-menu-item><mat-icon>person</mat-icon>Profile</button>
        <button mat-menu-item><mat-icon>settings</mat-icon>Settings</button>
        <button mat-menu-item (click)="onLogout()"><mat-icon>settings_power</mat-icon>Log Out</button>

      </mat-menu>
    </li>
  </ul>
  </div>
  </div>
</mat-toolbar>
</div>

<mat-sidenav-container class="app-container" style="background-image:url('assets/Background.png');">
  <mat-sidenav #sidenav class="app-sidenav mat-elevation-z2" mode="side" opened="true">
    <mat-toolbar>
      <button mat-button [routerLink]="['/navbar/dashboard']">Quick Access</button>
    </mat-toolbar>
    <mat-list>
     
      <a mat-list-item href="badges.html">
        <button mat-button>
          <mat-icon>event_note</mat-icon>
          collection sheet</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/individualcollection']">
        <button mat-button>
          <mat-icon>event_note</mat-icon>
          individual collection </button>
      </a>
     
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/addjournalentry']">
        <button mat-button>
          <mat-icon>add</mat-icon>
          add journal entry</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/accountclosure']">
        <button mat-button>
          <mat-icon>folder</mat-icon>
          closing entry</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/chartaccount']">
        <button mat-button>
          <mat-icon>insert_chart</mat-icon>
          chart of account</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/createclient']">
        <button mat-button>
          <mat-icon>person_add</mat-icon>
          client</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/creategroup']">
        <button mat-button>
          <mat-icon>group_add</mat-icon>
          group</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item [routerLink]="['/navbar/createcenter']">
        <button mat-button>
          <mat-icon>place</mat-icon>
          center</button>
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item href="badges.html">
        <button mat-button>
          <mat-icon>help</mat-icon>
          help</button>
      </a>


    </mat-list>


  </mat-sidenav>
  <div class="app-sidenav-content">
    <div class="wrapper" >
      <router-outlet></router-outlet>
    </div>

  </div>
</mat-sidenav-container>