Menu Structure

Menu Structure for Vertical layout

File: app/src/app/layouts/shared/menu

                    
<div class="scroll-content" appSlimscroll>
  <ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
    <ng-container *ngFor="let item of menuItems">
      <!-- title -->
      <li class="side-nav-title side-nav-item menu-title" *ngIf="item.isTitle">{{ item.label }}</li>
      <!-- link -->
      <li *ngIf="!item.isTitle">
        <!-- link title with submenu -->
        <a *ngIf="hasItems(item)" href="javascript:void(0);" class="side-nav-link">
          <i [class]="item?.icon" *ngIf="item.icon"></i>
          <span> {{ item?.label }}</span>
          <span class="menu-arrow"></span>
        </a>
        <!-- link title -->
        <a *ngIf="!hasItems(item)" [routerLink]="item?.link" class="side-nav-link">
          <i [class]="item?.icon" *ngIf="item.icon"></i>
          <span> {{ item?.label }}</span>
          <span class="badge badge-{{item.badge.variant}} float-end" *ngIf="item?.badge">{{item?.badge?.text}}</span>
        </a>
        <!-- subment level 1 -->
        <ul *ngIf="hasItems(item)" class="nav-second-level" aria-expanded="false">
          <li *ngFor="let subitem of item?.subItems" class="side-nav-item">
            <a *ngIf="hasItems(subitem)" href="javascript:void(0);" class="side-nav-link">
              <i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>

              {{ subitem?.label }}
              <span class="menu-arrow"></span>
            </a>

            <a [routerLink]="subitem?.link" *ngIf="!hasItems(subitem)" class="side-nav-link">
              <i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>
              {{ subitem?.label }}
            </a>

            <ul *ngIf="hasItems(subitem)" class="nav-third-level" aria-expanded="false">
              <li *ngFor="let subSubitem of subitem?.subItems">
                <a [routerLink]="subSubitem?.link" class="side-nav-link">
                  <i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>
                  {{ subSubitem.label }}
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ng-container>
    <li>
      <a class="side-nav-link" href="https:/lettstartdesign.com/themes/proctu-react-template/documentation"
        target="_blank">
        <i class="bx bx-file"></i>
        <span> Documentation</span>
      </a>
    </li>
  </ul>
</div>
Menu Structure

File: app/src/app/layouts/shared/topbar

                    
<header id="page-topbar" class="page-topbar">
  <nav class="navbar navbar-expand-lg">
    <div class="left-nav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link menu-toggle" id="menu-toggle" href="javascript:void(0)" (click)="toggleMobileMenu($event)">
            <i class="fe-arrow-left fs-24"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Help</a>
        </li>
      </ul>
    </div>
    <div class="logo">
      <a class="navbar-brand" routerLink="/">
        <img src="assets/images/logo.png" height="28" class="logo-lg" />
        <img src="assets/images/logo-sm.png" height="28" class="logo-sm" />
      </a>
    </div>
    <div class="right-nav" [ngClass]="{'show-navbar':showMobileTopBar}">
      <div class="d-md-none">
        <a href="javascript:void(0)" class="dots-icon" id="mobileNavbar" (click)="showMobileTopBar = !showMobileTopBar">
          <i class="mdi mdi-dots-horizontal fs-lg"></i>
        </a>
      </div>
      <ul class="navbar-nav">
        <li ngbDropdown class="nav-item">
          <a href="javascript:void(0)" ngbDropdownToggle class="nav-link search-dropdown">
            <i class="fe-search fs-24"></i>
          </a>
          <div class="dropdown-menu-right search-drop-menu" ngbDropdownMenu>
            <form>
              <input class="form-control" type="text" placeholder="Type something.." aria-label="Search" />
            </form>
            <h6 class="dropdown-header">Recent Searches</h6>
            <a href="javascript: void(0);" ngbDropdownItem>
              charts
            </a>
            <a href="javascript: void(0);" ngbDropdownItem>
              new orders
            </a>
            <a href="javascript: void(0);" ngbDropdownItem>
              file manager
            </a>
            <a href="javascript: void(0);" ngbDropdownItem>
              new users
            </a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)" role="button" (click)="openChatBar()">
            <i class="mdi mdi-message-outline fs-24"></i>
          </a>
        </li>
        <li ngbDropdown class="nav-item">
          <a href="javascript:void(0)" ngbDropdownToggle class="nav-link notify-toggle">
            3
          </a>
          <div ngbDropdownMenu class="dropdown-menu-right notify-dropdown-menu">
            <h6 class="dropdown-header mb-2">Notifications</h6>
            <div appSlimscroll>
              <a class="notify-item" href="javascript:void(0);" *ngFor="let item of notificationItems">
                <div class="notify-header">
                  ...
                </div>
              </a>
            </div>
          </div>
        </li>
        <li ngbDropdown class="nav-item">
          <a href="javascript:void(0)" ngbDropdownToggle class="nav-link notify-toggle">
            <img src="assets/images/users/avatar-3.jpg" class="rounded-circle" width="40" alt="">
          </a>
          <div ngbDropdownMenu class="dropdown-menu-right profile-drop-menu">
            ...
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>