ADDED Materialize theme

theme/packages/dark/src/app/layouts/full/full.component.html

@@ -0,0 +1,197 @@
+<span [dir]="options.dir!">
+  <mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
+      'sidebarNav-mini':
+        options.sidenavCollapsed && options.navPos !== 'top' && !resView,
+      'sidebarNav-horizontal': options.horizontal,
+      cardBorder: options.cardBorder
+    }">
+    <!-- ============================================================== -->
+    <!-- Vertical Sidebar -->
+    <!-- ============================================================== -->
+    @if (!options.horizontal) {
+    <mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
+        options.navPos === 'side' &&
+        options.sidenavOpened &&
+        !isOver &&
+        !resView
+      " (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
+      <div class="flex-layout">
+        <app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
+        <ng-scrollbar class="position-relative" style="height: 100%">
+          <mat-nav-list class="sidebar-list">
+            @for(item of navItems; track item) {
+            <app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
+            </app-nav-item>
+            }
+          </mat-nav-list>
+        </ng-scrollbar>
+        <div class="p-24 m-t-auto profile-bar">
+          <div class="bg-light-secondary d-flex align-items-center rounded p-16">
+            <img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
+            <div class="m-l-16">
+              <h4 class="f-w-600">Mathew</h4>
+              <span class="f-s-12">Designer</span>
+            </div>
+            <div class="m-l-auto">
+              <a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
+                <i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav>
+    }
+
+    <!-- ============================================================== -->
+    <!-- horizontal Sidebar -->
+    <!-- ============================================================== -->
+    @if (resView) {
+    <mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
+      (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
+      <app-sidebar> </app-sidebar>
+      <ng-scrollbar class="position-relative" style="height: 100%">
+        <mat-nav-list class="sidebar-list">
+          @for(item of navItems; track item) {
+          <app-nav-item [item]="item" (notify)="sidenav.toggle()">
+          </app-nav-item>
+          }
+        </mat-nav-list>
+      </ng-scrollbar>
+      <div class="p-24 m-t-auto profile-bar">
+        <div class="bg-light-secondary d-flex align-items-center rounded p-16">
+          <img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
+          <div class="m-l-16">
+            <h4 class="f-w-600">Mathew</h4>
+            <span class="f-s-12">Designer</span>
+          </div>
+          <div class="m-l-auto">
+            <a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
+              <i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
+            </a>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav>
+    }
+
+    <!-- ============================================================== -->
+    <!-- Main Content -->
+    <!-- ============================================================== -->
+    <mat-sidenav-content class="contentWrapper" #content>
+      <!-- ============================================================== -->
+      <!-- VerticalHeader -->
+      <!-- ============================================================== -->
+      @if (!options.horizontal) {
+      <app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
+        (toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
+      } @else {
+      <!-- horizontal header -->
+      <app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
+        (optionsChange)="receiveOptions($event)"></app-horizontal-header>
+      } @if(options.horizontal) {
+      <app-horizontal-sidebar></app-horizontal-sidebar>
+      }
+
+      <main class="pageWrapper" [ngClass]="{
+          maxWidth: options.boxed
+        }">
+        <app-breadcrumb></app-breadcrumb>
+        <!-- ============================================================== -->
+        <!-- Outlet -->
+        <!-- ============================================================== -->
+        <router-outlet></router-outlet>
+        <div class="customizerBtn">
+          <button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
+            <mat-icon>settings</mat-icon>
+          </button>
+        </div>
+      </main>
+
+      <!-- ------------------------------------------------------------------
+        Mobile Apps Sidebar
+        ------------------------------------------------------------------ -->
+      <div [class.open]="isFilterNavOpen" class="filter-sidebar">
+        <div>
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="branding">
+              @if(options.theme === 'light') {
+              <a href="/">
+                <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+              </a>
+              } @else {
+              <a href="/">
+                <img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
+              </a>
+              }
+            </div>
+            <button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
+              <i-tabler name="x" class="icon-18 d-flex"></i-tabler>
+            </button>
+          </div>
+
+          <mat-accordion>
+            <mat-expansion-panel class="shadow-none">
+              <mat-expansion-panel-header>
+                <mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div>
+                <div class="row">
+                  @for(appdd of apps; track appdd.img) {
+                  <div class="col-12 text-hover-primary">
+                    <a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
+                      <button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
+                        <img [src]="appdd.img" width="20" />
+                      </button>
+
+                      <div>
+                        <h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
+                          {{ appdd.title }}
+                        </h5>
+                        <span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
+                      </div>
+                    </a>
+                  </div>
+                  }
+                </div>
+                <h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
+                @for(quicklink of quicklinks; track quicklink.title) {
+                <div class="text-hover-primary">
+                  <a [routerLink]="['quicklink.link']"
+                    class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
+                </div>
+                }
+              </div>
+            </mat-expansion-panel>
+          </mat-accordion>
+
+          <div class="p-x-16">
+            <a [routerLink]="['/apps/calendar']"
+              class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
+              <span class="f-s-15 f-w-500 m-l-8">Calendar</span>
+            </a>
+            <a [routerLink]="['/apps/chat']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
+              <span class="f-s-15 f-w-500 m-l-8">Chat</span>
+            </a>
+            <a [routerLink]="['/apps/email/inbox']"
+              class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
+              <span class="f-s-15 f-w-500 m-l-8">Email</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav-content>
+
+    <mat-sidenav #customizerRight mode="over" position="end">
+      <div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between">
+        <h3 class="f-s-21 f-w-600">Settings</h3>
+        <button class="d-lg-none" mat-button (click)="customizerRight.toggle()">
+          Close
+        </button>
+      </div>
+      <mat-divider></mat-divider>
+
+      <app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
+    </mat-sidenav>
+  </mat-sidenav-container>
+</span>

theme/packages/dark/src/app/layouts/full/full.component.ts

@@ -0,0 +1,284 @@
+import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
+import { CoreService } from 'src/app/services/core.service';
+import { AppSettings } from 'src/app/config';
+import { filter } from 'rxjs/operators';
+import { NavigationEnd, Router } from '@angular/router';
+import { navItems } from './vertical/sidebar/sidebar-data';
+import { NavService } from '../../services/nav.service';
+import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './vertical/sidebar/sidebar.component';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { HeaderComponent } from './vertical/header/header.component';
+import { AppHorizontalHeaderComponent } from './horizontal/header/header.component';
+import { AppHorizontalSidebarComponent } from './horizontal/sidebar/sidebar.component';
+import { AppBreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
+import { CustomizerComponent } from './shared/customizer/customizer.component';
+
+const MOBILE_VIEW = 'screen and (max-width: 768px)';
+const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
+const MONITOR_VIEW = 'screen and (min-width: 1024px)';
+const BELOWMONITOR = 'screen and (max-width: 1023px)';
+
+// for mobile app sidebar
+interface apps {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface quicklinks {
+  id: number;
+  title: string;
+  link: string;
+}
+
+@Component({
+    selector: 'app-full',
+    imports: [
+        RouterModule,
+        AppNavItemComponent,
+        MaterialModule,
+        CommonModule,
+        SidebarComponent,
+        NgScrollbarModule,
+        TablerIconsModule,
+        HeaderComponent,
+        AppHorizontalHeaderComponent,
+        AppHorizontalSidebarComponent,
+        AppBreadcrumbComponent,
+        CustomizerComponent,
+    ],
+    templateUrl: './full.component.html',
+  
+    encapsulation: ViewEncapsulation.None
+})
+export class FullComponent implements OnInit {
+  navItems = navItems;
+
+  
+
+  @ViewChild('leftsidenav')
+  public sidenav: MatSidenav;
+  resView = false;
+  @ViewChild('content', { static: true }) content!: MatSidenavContent;
+  //get options from service
+  options = this.settings.getOptions();
+  private layoutChangesSubscription = Subscription.EMPTY;
+  private isMobileScreen = false;
+  private isContentWidthFixed = true;
+  private isCollapsedWidthFixed = false;
+  private htmlElement!: HTMLHtmlElement;
+
+  get isOver(): boolean {
+    return this.isMobileScreen;
+  }
+
+  get isTablet(): boolean {
+    return this.resView;
+  }
+
+  // for mobile app sidebar
+  apps: apps[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-dd-chat.svg',
+      title: 'Chat Application',
+      subtitle: 'Messages & Emails',
+      link: '/apps/chat',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-dd-cart.svg',
+      title: 'Todo App',
+      subtitle: 'Completed task',
+      link: '/apps/todo',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-dd-invoice.svg',
+      title: 'Invoice App',
+      subtitle: 'Get latest invoice',
+      link: '/apps/invoice',
+    },
+    {
+      id: 4,
+      img: '/assets/images/svgs/icon-dd-date.svg',
+      title: 'Calendar App',
+      subtitle: 'Get Dates',
+      link: '/apps/calendar',
+    },
+    {
+      id: 5,
+      img: '/assets/images/svgs/icon-dd-mobile.svg',
+      title: 'Contact Application',
+      subtitle: '2 Unsaved Contacts',
+      link: '/apps/contacts',
+    },
+    {
+      id: 6,
+      img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
+      title: 'Tickets App',
+      subtitle: 'Create new ticket',
+      link: '/apps/tickets',
+    },
+    {
+      id: 7,
+      img: '/assets/images/svgs/icon-dd-message-box.svg',
+      title: 'Email App',
+      subtitle: 'Get new emails',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 8,
+      img: '/assets/images/svgs/icon-dd-application.svg',
+      title: 'Courses',
+      subtitle: 'Create new course',
+      link: '/apps/courses',
+    },
+  ];
+
+  quicklinks: quicklinks[] = [
+    {
+      id: 1,
+      title: 'Pricing Page',
+      link: '/theme-pages/pricing',
+    },
+    {
+      id: 2,
+      title: 'Authentication Design',
+      link: '/authentication/login',
+    },
+    {
+      id: 3,
+      title: 'Register Now',
+      link: '/authentication/side-register',
+    },
+    {
+      id: 4,
+      title: '404 Error Page',
+      link: '/authentication/error',
+    },
+    {
+      id: 5,
+      title: 'Notes App',
+      link: '/apps/notes',
+    },
+    {
+      id: 6,
+      title: 'Employee App',
+      link: '/apps/employee',
+    },
+    {
+      id: 7,
+      title: 'Todo Application',
+      link: '/apps/todo',
+    },
+    {
+      id: 8,
+      title: 'Treeview',
+      link: '/theme-pages/treeview',
+    },
+  ];
+
+  constructor(
+    private settings: CoreService,
+    private mediaMatcher: MediaMatcher,
+    private router: Router,
+    private breakpointObserver: BreakpointObserver,
+    private navService: NavService, private cdr: ChangeDetectorRef
+  ) {
+    this.htmlElement = document.querySelector('html')!;
+    this.layoutChangesSubscription = this.breakpointObserver
+      .observe([MOBILE_VIEW, TABLET_VIEW, MONITOR_VIEW, BELOWMONITOR])
+      .subscribe((state) => {
+        // SidenavOpened must be reset true when layout changes
+        this.options.sidenavOpened = true;
+        this.isMobileScreen = state.breakpoints[BELOWMONITOR];
+        if (this.options.sidenavCollapsed == false) {
+          this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
+        }
+        this.isContentWidthFixed = state.breakpoints[MONITOR_VIEW];
+        this.resView = state.breakpoints[BELOWMONITOR];
+      });
+
+    // Initialize project theme with options
+    this.receiveOptions(this.options);
+
+    // This is for scroll to top
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((e) => {
+        this.content.scrollTo({ top: 0 });
+      });
+  }
+
+  isFilterNavOpen = false;
+
+  toggleFilterNav() {
+    this.isFilterNavOpen = !this.isFilterNavOpen;
+    console.log('Sidebar open:', this.isFilterNavOpen);
+    this.cdr.detectChanges(); // Ensures Angular updates the view
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy() {
+    this.layoutChangesSubscription.unsubscribe();
+  }
+
+  toggleCollapsed() {
+    this.isContentWidthFixed = false;
+    this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
+    this.resetCollapsedState();
+  }
+
+  resetCollapsedState(timer = 400) {
+    setTimeout(() => this.settings.setOptions(this.options), timer);
+  }
+
+  onSidenavClosedStart() {
+    this.isContentWidthFixed = false;
+  }
+
+  onSidenavOpenedChange(isOpened: boolean) {
+    this.isCollapsedWidthFixed = !this.isOver;
+    this.options.sidenavOpened = isOpened;
+    this.settings.setOptions(this.options);
+  }
+
+  receiveOptions(options: AppSettings): void {
+    this.toggleDarkTheme(options);
+    this.toggleColorsTheme(options);
+  }
+
+  toggleDarkTheme(options: AppSettings) {
+    if (options.theme === 'dark') {
+      this.htmlElement.classList.add('dark-theme');
+      this.htmlElement.classList.remove('light-theme');
+    } else {
+      this.htmlElement.classList.remove('dark-theme');
+      this.htmlElement.classList.add('light-theme');
+    }
+  }
+
+  toggleColorsTheme(options: AppSettings) {
+    // Remove any existing theme class dynamically
+    this.htmlElement.classList.forEach((className) => {
+      if (className.endsWith('_theme')) {
+        this.htmlElement.classList.remove(className);
+      }
+    });
+
+    // Add the selected theme class
+    this.htmlElement.classList.add(options.activeTheme);
+  }
+}

theme/packages/dark/src/app/layouts/full/horizontal/header/header.component.html

@@ -0,0 +1,296 @@
+<mat-toolbar class="topbar horizontal-topbar">
+  <div class="container">
+    <div class="d-none d-sm-flex branding">
+      <app-branding></app-branding>
+    </div>
+
+    <!-- Mobile Menu -->
+    <button
+      mat-icon-button
+      (click)="toggleMobileNav.emit()"
+      class="d-block d-lg-none"
+    >
+      <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+    </button>
+    <!-- --------------------------------------------------------------- -->
+
+    <!-- --------------------------------------------------------------- -->
+    <!--  Search -->
+    <!-- --------------------------------------------------------------- -->
+    <button mat-icon-button (click)="openDialog()" class="d-flex">
+      <i-tabler name="search" class="icon-20 d-flex"></i-tabler>
+    </button>
+
+    <div class="d-none d-lg-flex">
+      <!-- --------------------------------------------------------------- -->
+      <!--  Links -->
+      <!-- --------------------------------------------------------------- -->
+      <button
+        mat-button
+        [matMenuTriggerFor]="appsmenu"
+        aria-label="Notifications"
+      >
+        <div class="d-flex align-items-center">
+          Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
+        </div>
+      </button>
+      <mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
+        <div class="row">
+          <div class="col-sm-8 b-r-1 p-r-0">
+            <div class="p-32 p-b-0">
+              <div class="row">
+                @for(appdd of apps; track appdd.title) {
+                <div class="col-sm-6 text-hover-primary">
+                  <a
+                    [routerLink]="[appdd.link]"
+                    class="d-flex align-items-center text-decoration-none m-b-24"
+                  >
+                    <span
+                      class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
+                    >
+                      <img [src]="appdd.img" width="20" />
+                    </span>
+
+                    <div class="m-l-16">
+                      <h5
+                        class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+                      >
+                        {{ appdd.title }}
+                      </h5>
+                      <span class="text-body f-s-12">{{
+                        appdd.subtitle
+                      }}</span>
+                    </div>
+                  </a>
+                </div>
+                }
+              </div>
+            </div>
+            <div
+              class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
+            >
+              <span
+                class="d-flex align-items-center  f-s-16 f-w-500"
+              >
+                <i-tabler name="help" class="icon-20 m-r-8"></i-tabler
+                >Frequently Asked Questions
+              </span>
+              <a
+                [routerLink]="['/theme-pages/faq']"
+                mat-flat-button
+                color="primary"
+                >Check</a
+              >
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <div class="p-x-16 p-y-32">
+              <h4 class="f-s-18 f-w-600  m-b-16">Quick Links</h4>
+              @for(quicklink of quicklinks; track quicklink.title) {
+              <div class="text-hover-primary">
+                <a
+                  [routerLink]="[quicklink.link]"
+                  class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
+                  >{{ quicklink.title }}</a
+                >
+              </div>
+              }
+            </div>
+          </div>
+        </div>
+      </mat-menu>
+      <a mat-button [routerLink]="['/apps/chat']">Chat</a>
+      <a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
+      <a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
+    </div>
+
+    <span class="flex-1-auto"></span>
+
+    <!-- Mobile Menu -->
+    <button
+      mat-icon-button
+      (click)="toggleMobileFilterNav.emit()"
+      class="d-flex d-lg-none justify-content-center"
+    >
+      <i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
+    </button>
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- langugage Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
+      <img
+        [src]="selectedLanguage.icon"
+        class="rounded-circle object-cover icon-20"
+      />
+    </button>
+    <mat-menu #flags="matMenu" class="cardWithShadow">
+      @for(lang of languages; track lang.icon) {
+      <button mat-menu-item (click)="changeLanguage(lang)">
+        <div class="d-flex align-items-center">
+          <img
+            [src]="lang.icon"
+            class="rounded-circle object-cover m-r-8 icon-20"
+          />
+          <span class=" f-s-14">{{ lang.language }}</span>
+        </div>
+      </button>
+      }
+    </mat-menu>
+
+    @if(options.theme=='light'){
+      <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
+        <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
+      </button>
+      }@else{
+      <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
+        <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+      </button>
+    }
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- Notification Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-icon-button matBadge="5"
+      [matMenuTriggerFor]="notificationmenu"
+      aria-label="Notifications" class="m-x-5 notification-badge"
+    >
+      <i-tabler
+        class="d-flex"
+        name="bell"
+      ></i-tabler>
+    </button>
+    <mat-menu
+      #notificationmenu="matMenu"
+      xPosition="before"
+      class="topbar-dd cardWithShadow"
+    >
+      <div class="d-flex align-items-center p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
+        <span class="m-l-auto">
+          <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
+            >5 new</span
+          >
+        </span>
+      </div>
+      @for(notification of notifications; track notification.title) {
+      <button mat-menu-item class="p-x-32 p-y-16">
+        <div class="d-flex align-items-center">
+          <img [src]="notification.img" class="rounded-circle" width="48" />
+          <div class="m-l-16">
+            <h5 class="f-s-14 f-w-600 m-0 ">
+              {{ notification.title }}
+            </h5>
+            <span>{{ notification.subtitle }}</span>
+          </div>
+        </div>
+      </button>
+      }
+
+      <div class="p-y-12 p-x-32">
+        <button mat-stroked-button color="primary" class="w-100">
+          See all notifications
+        </button>
+      </div>
+    </mat-menu>
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- profile Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="profilemenu"
+      aria-label="Notifications"
+    >
+      <img
+        src="/assets/images/profile/user-1.jpg"
+        class="rounded-circle object-cover icon-35 profile-dd"
+        width="35"
+      />
+    </button>
+    <mat-menu
+      #profilemenu="matMenu"
+      xPosition="before"
+      class="topbar-dd cardWithShadow"
+    >
+      <div class="p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
+
+        <div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
+          <img
+            src="/assets/images/profile/user-1.jpg"
+            class="rounded-circle"
+            width="95"
+          />
+          <div class="m-l-16">
+            <h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
+            <span class="f-s-14 d-block m-b-4">Designer</span>
+            <span class="d-flex align-items-center">
+              <i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
+              info&#64;modernize.com
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="p-x-32">
+        @for(profile of profiledd; track profile.title) {
+        <a
+          class="p-y-16 text-decoration-none d-block text-hover-primary"
+          [routerLink]="[profile.link]"
+        >
+          <div class="d-flex align-items-center">
+            <button
+              mat-mini-fab
+              class="text-primary bg-light-primary shadow-none rounded"
+            >
+              <img [src]="profile.img" width="20" />
+            </button>
+
+            <div class="m-l-16">
+              <h5
+                class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+              >
+                {{ profile.title }}
+              </h5>
+              <span class="f-s-14 text-body">{{ profile.subtitle }}</span>
+            </div>
+          </div>
+        </a>
+        }
+
+        <!-- upgrade -->
+        <div
+          class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
+        >
+          <div class="d-flex align-items-center">
+            <div>
+              <h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
+                Unlimited <br />
+                Access
+              </h5>
+              <button mat-flat-button color="primary">Upgrade</button>
+            </div>
+            <div class="m-l-auto">
+              <img
+                src="/assets/images/backgrounds/unlimited-bg.png"
+                alt="upgrade-bg"
+                class="upgrade-bg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-y-12 p-x-32">
+        <a
+          [routerLink]="['/authentication/login']"
+          mat-stroked-button
+          color="primary"
+          class="w-100"
+          >Logout</a
+        >
+      </div>
+    </mat-menu>
+  </div>
+</mat-toolbar>

theme/packages/dark/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts

@@ -0,0 +1,633 @@
+import { NavItem } from '../../vertical/sidebar/nav-item/nav-item';
+
+export const navItems: NavItem[] = [
+  {
+    navCap: 'Home',
+  },
+  {
+    displayName: 'Dashboards',
+    iconName: 'home',
+    route: 'dashboards',
+    children: [
+      {
+        displayName: 'Analytical',
+        iconName: 'point',
+        route: 'dashboards/dashboard1',
+      },
+      {
+        displayName: 'eCommerce',
+        iconName: 'point',
+        route: 'dashboards/dashboard2',
+      },
+    ],
+  },
+  {
+    displayName: 'Frontend pages',
+    iconName: 'app-window',
+    route: 'front-pages',
+    children: [
+      {
+        displayName: 'Home Page',
+        iconName: 'point',
+        route: 'front-pages/homepage',
+      } ,
+      {
+        displayName: 'About Us',
+        iconName: 'point',
+        route: 'front-pages/about',
+      } ,
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'front-pages/blog',
+      } ,
+      {
+        displayName: 'Blog Details',
+        iconName: 'point',
+        route: 'front-pages/blog-details',
+      } ,
+      {
+        displayName: 'Portfolio',
+        iconName: 'point',
+        route: 'front-pages/portfolio',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'front-pages/pricing',
+      },
+      {
+        displayName: 'Contact',
+        iconName: 'point',
+        route: 'front-pages/contact',
+      }
+    ]
+  },
+  {
+    displayName: 'Apps',
+    iconName: 'apps',
+    route: 'apps',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Chat',
+        iconName: 'point',
+        route: 'apps/chat',
+      },
+      {
+        displayName: 'Calendar',
+        iconName: 'point',
+        route: 'apps/calendar',
+      },
+      {
+        displayName: 'Email',
+        iconName: 'point',
+        route: 'apps/email/inbox',
+      },
+      {
+        displayName: 'Contacts',
+        iconName: 'point',
+        route: 'apps/contacts',
+      },
+      {
+        displayName: 'Contact List',
+        iconName: 'point',
+        route: 'apps/contact-list',
+      },
+      {
+        displayName: 'Courses',
+        iconName: 'point',
+        route: 'apps/courses',
+      },
+      {
+        displayName: 'Employee',
+        iconName: 'point',
+        route: 'apps/employee',
+      },
+      {
+        displayName: 'Notes',
+        iconName: 'point',
+        route: 'apps/notes',
+      },
+      {
+        displayName: 'Tickets',
+        iconName: 'point',
+        route: 'apps/tickets',
+      },
+      {
+        displayName: 'Invoice',
+        iconName: 'point',
+        route: 'apps/invoice',
+      },
+      {
+        displayName: 'ToDo',
+        iconName: 'point',
+        route: 'apps/todo',
+      },
+      {
+        displayName: 'Kanban',
+        iconName: 'point',
+        route: 'apps/kanban',
+      },
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'apps/blog',
+        children: [
+          {
+            displayName: 'Post',
+            iconName: 'point',
+            route: 'apps/blog/post',
+          },
+          {
+            displayName: 'Detail',
+            iconName: 'point',
+            route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
+          },
+        ],
+      },
+      {
+        displayName: 'User Profile',
+        iconName: 'point',
+        route: 'apps/profile-details',
+        children: [
+          {
+            displayName: 'Profile',
+            iconName: 'point',
+            route: 'apps/profile-details/profile',
+          },
+          {
+            displayName: 'Followers',
+            iconName: 'point',
+            route: 'apps/profile-details/followers',
+          },
+          {
+            displayName: 'Friends',
+            iconName: 'point',
+            route: 'apps/profile-details/friends',
+          },
+          {
+            displayName: 'Gellary',
+            iconName: 'point',
+            route: 'apps/profile-details/gallery',
+          },
+        ],
+      },
+      {
+        displayName: 'Ecommerce',
+        iconName: 'point',
+        route: 'apps/product',
+        children: [
+          {
+            displayName: 'Product List',
+            iconName: 'point',
+            route: 'apps/product/product-list',
+          },
+          {
+            displayName: 'Add Product',
+            iconName: 'point',
+            route: 'apps/product/add-product',
+          },
+          {
+            displayName: 'Edit Product',
+            iconName: 'point',
+            route: 'apps/product/edit-product',
+          },
+          {
+            displayName: 'Shop',
+            iconName: 'point',
+            route: 'apps/product/shop',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    displayName: 'Ui',
+    iconName: 'components',
+    route: 'ui-components',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Badge',
+        iconName: 'point',
+        route: 'ui-components/badge',
+      },
+      {
+        displayName: 'Expansion Panel',
+        iconName: 'point',
+        route: 'ui-components/expansion',
+      },
+      {
+        displayName: 'Chips',
+        iconName: 'point',
+        route: 'ui-components/chips',
+      },
+      {
+        displayName: 'Dialog',
+        iconName: 'point',
+        route: 'ui-components/dialog',
+      },
+      {
+        displayName: 'Lists',
+        iconName: 'point',
+        route: 'ui-components/lists',
+      },
+      {
+        displayName: 'Divider',
+        iconName: 'point',
+        route: 'ui-components/divider',
+      },
+      {
+        displayName: 'Menu',
+        iconName: 'point',
+        route: 'ui-components/menu',
+      },
+      {
+        displayName: 'Paginator',
+        iconName: 'point',
+        route: 'ui-components/paginator',
+      },
+      {
+        displayName: 'Progress Bar',
+        iconName: 'point',
+        route: 'ui-components/progress',
+      },
+      {
+        displayName: 'Progress Spinner',
+        iconName: 'point',
+        route: 'ui-components/progress-spinner',
+      },
+      {
+        displayName: 'Ripples',
+        iconName: 'point',
+        route: 'ui-components/ripples',
+      },
+      {
+        displayName: 'Slide Toggle',
+        iconName: 'point',
+        route: 'ui-components/slide-toggle',
+      },
+      {
+        displayName: 'Slider',
+        iconName: 'point',
+        route: 'ui-components/slider',
+      },
+      {
+        displayName: 'Snackbar',
+        iconName: 'point',
+        route: 'ui-components/snackbar',
+      },
+      {
+        displayName: 'Tabs',
+        iconName: 'point',
+        route: 'ui-components/tabs',
+      },
+      {
+        displayName: 'Toolbar',
+        iconName: 'point',
+        route: 'ui-components/toolbar',
+      },
+      {
+        displayName: 'Tooltips',
+        iconName: 'point',
+        route: 'ui-components/tooltips',
+      },
+    ],
+  },
+  {
+    displayName: 'Pages',
+    iconName: 'clipboard',
+    route: 'theme-pages',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Treeview',
+        iconName: 'point',
+        route: 'theme-pages/treeview',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'theme-pages/pricing',
+      },
+      {
+        displayName: 'Account Setting',
+        iconName: 'point',
+        route: 'theme-pages/account-setting',
+      },
+      {
+        displayName: 'FAQ',
+        iconName: 'point',
+        route: 'theme-pages/faq',
+      },
+      {
+        displayName: 'Landingpage',
+        iconName: 'point',
+        route: 'landingpage',
+      },
+      {
+        displayName: 'Widgets',
+        iconName: 'point',
+        route: 'widgets',
+        children: [
+          {
+            displayName: 'Cards',
+            iconName: 'point',
+            route: 'widgets/cards',
+          },
+          {
+            displayName: 'Banners',
+            iconName: 'point',
+            route: 'widgets/banners',
+          },
+          {
+            displayName: 'Charts',
+            iconName: 'point',
+            route: 'widgets/charts',
+          },
+        ],
+      },
+      {
+        displayName: 'Charts',
+        iconName: 'point',
+        route: 'charts',
+        children: [
+          {
+            displayName: 'Line',
+            iconName: 'point',
+            route: '/charts/line',
+          },
+          {
+            displayName: 'Gredient',
+            iconName: 'point',
+            route: '/charts/gredient',
+          },
+          {
+            displayName: 'Area',
+            iconName: 'point',
+            route: '/charts/area',
+          },
+          {
+            displayName: 'Candlestick',
+            iconName: 'point',
+            route: '/charts/candlestick',
+          },
+          {
+            displayName: 'Column',
+            iconName: 'point',
+            route: '/charts/column',
+          },
+          {
+            displayName: 'Doughnut & Pie',
+            iconName: 'point',
+            route: '/charts/doughnut-pie',
+          },
+          {
+            displayName: 'Radialbar & Radar',
+            iconName: 'point',
+            route: '/charts/radial-radar',
+          },
+        ],
+      },
+      {
+        displayName: 'Auth',
+        iconName: 'point',
+        route: '/',
+        children: [
+          {
+            displayName: 'Login',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Login 1',
+                iconName: 'point',
+                route: '/authentication/login',
+              },
+              {
+                displayName: 'Boxed Login',
+                iconName: 'point',
+                route: '/authentication/boxed-login',
+              },
+            ],
+          },
+          {
+            displayName: 'Register',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Login 1',
+                iconName: 'point',
+                route: '/authentication/side-register',
+              },
+              {
+                displayName: 'Boxed Login',
+                iconName: 'point',
+                route: '/authentication/boxed-register',
+              },
+            ],
+          },
+          {
+            displayName: 'Forgot Password',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Side Forgot Password',
+                iconName: 'point',
+                route: '/authentication/side-forgot-pwd',
+              },
+              {
+                displayName: 'Boxed Forgot Password',
+                iconName: 'point',
+                route: '/authentication/boxed-forgot-pwd',
+              },
+            ],
+          },
+          {
+            displayName: 'Two Steps',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Side Two Steps',
+                iconName: 'point',
+                route: '/authentication/side-two-steps',
+              },
+              {
+                displayName: 'Boxed Two Steps',
+                iconName: 'point',
+                route: '/authentication/boxed-two-steps',
+              },
+            ],
+          },
+          {
+            displayName: 'Error',
+            iconName: 'point',
+            route: '/authentication/error',
+          },
+          {
+            displayName: 'Maintenance',
+            iconName: 'point',
+            route: '/authentication/maintenance',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    displayName: 'Forms',
+    iconName: 'file-description',
+    route: 'forms',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Form elements',
+        iconName: 'point',
+        route: 'forms/forms-elements',
+        children: [
+          {
+            displayName: 'Autocomplete',
+            iconName: 'point',
+            route: 'forms/forms-elements/autocomplete',
+          },
+          {
+            displayName: 'Button',
+            iconName: 'point',
+            route: 'forms/forms-elements/button',
+          },
+          {
+            displayName: 'Checkbox',
+            iconName: 'point',
+            route: 'forms/forms-elements/checkbox',
+          },
+          {
+            displayName: 'Radio',
+            iconName: 'point',
+            route: 'forms/forms-elements/radio',
+          },
+          {
+            displayName: 'Datepicker',
+            iconName: 'point',
+            route: 'forms/forms-elements/datepicker',
+          },
+        ],
+      },
+      {
+        displayName: 'Form Layouts',
+        iconName: 'point',
+        route: '/forms/form-layouts',
+      },
+      {
+        displayName: 'Form Horizontal',
+        iconName: 'point',
+        route: '/forms/form-horizontal',
+      },
+      {
+        displayName: 'Form Vertical',
+        iconName: 'point',
+        route: '/forms/form-vertical',
+      },
+      {
+        displayName: 'Form Wizard',
+        iconName: 'point',
+        route: '/forms/form-wizard',
+      },
+      {
+        displayName: 'Toastr',
+        iconName: 'point',
+        route: '/forms/form-toastr',
+      },
+      {
+        displayName: 'Editor',
+        iconName: 'point',
+        route: '/forms/form-editor',
+      },
+    ],
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'layout',
+    route: 'tables',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Basic Table',
+        iconName: 'point',
+        route: 'tables/basic-table',
+      },
+      {
+        displayName: 'Dynamic Table',
+        iconName: 'point',
+        route: 'tables/dynamic-table',
+      },
+      {
+        displayName: 'Expand Table',
+        iconName: 'point',
+        route: 'tables/expand-table',
+      },
+      {
+        displayName: 'Filterable Table',
+        iconName: 'point',
+        route: 'tables/filterable-table',
+      },
+      {
+        displayName: 'Footer Row Table',
+        iconName: 'point',
+        route: 'tables/footer-row-table',
+      },
+      {
+        displayName: 'HTTP Table',
+        iconName: 'point',
+        route: 'tables/http-table',
+      },
+      {
+        displayName: 'Mix Table',
+        iconName: 'point',
+        route: 'tables/mix-table',
+      },
+      {
+        displayName: 'Multi Header Footer',
+        iconName: 'point',
+        route: 'tables/multi-header-footer-table',
+      },
+      {
+        displayName: 'Pagination Table',
+        iconName: 'point',
+        route: 'tables/pagination-table',
+      },
+      {
+        displayName: 'Row Context Table',
+        iconName: 'point',
+        route: 'tables/row-context-table',
+      },
+      {
+        displayName: 'Selection Table',
+        iconName: 'point',
+        route: 'tables/selection-table',
+      },
+      {
+        displayName: 'Sortable Table',
+        iconName: 'point',
+        route: 'tables/sortable-table',
+      },
+      {
+        displayName: 'Sticky Column',
+        iconName: 'point',
+        route: 'tables/sticky-column-table',
+      },
+      {
+        displayName: 'Sticky Header Footer',
+        iconName: 'point',
+        route: 'tables/sticky-header-footer-table',
+      },
+      {
+        displayName: 'Data table',
+        iconName: 'point',
+        route: '/datatable/kichen-sink',
+      },
+    ],
+  },
+];

theme/packages/dark/src/app/layouts/full/horizontal/sidebar/sidebar.component.ts

@@ -0,0 +1,48 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  OnChanges,
+} from '@angular/core';
+import { navItems } from './sidebar-data';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../services/nav.service';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { AppHorizontalNavItemComponent } from './nav-item/nav-item.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-horizontal-sidebar',
+  imports: [AppHorizontalNavItemComponent, CommonModule],
+  templateUrl: './sidebar.component.html',
+})
+export class AppHorizontalSidebarComponent implements OnInit {
+  navItems = navItems;
+  parentActive = '';
+
+  mobileQuery: MediaQueryList;
+  private _mobileQueryListener: () => void;
+
+  constructor(
+    public navService: NavService,
+    public router: Router,
+    media: MediaMatcher,
+    changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.mobileQuery = media.matchMedia('(min-width: 1100px)');
+    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this._mobileQueryListener);
+    this.router.events.subscribe(
+      () => (this.parentActive = this.router.url.split('/')[1])
+    );
+  }
+
+  ngOnInit(): void {
+    this.parentActive = this.router.url.split('/')[1];
+
+    this.router.events.subscribe(() => {
+      this.parentActive = this.router.url.split('/')[1];
+    });
+  }
+}

theme/packages/dark/src/app/layouts/full/shared/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+    selector: 'app-breadcrumb',
+    imports: [RouterModule, TablerIconsModule],
+    templateUrl: './breadcrumb.component.html',
+    styleUrls: []
+})
+export class AppBreadcrumbComponent {
+  // @Input() layout;
+  pageInfo: Data | any = Object.create(null);
+  myurl: any = this.router.url.slice(1).split('/');
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private titleService: Title
+  ) {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(map(() => this.activatedRoute))
+      .pipe(
+        map((route) => {
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        })
+      )
+      .pipe(filter((route) => route.outlet === 'primary'))
+      .pipe(mergeMap((route) => route.data))
+      // tslint:disable-next-line - Disables all
+      .subscribe((event) => {
+        // tslint:disable-next-line - Disables all
+        this.titleService.setTitle(event['title'] + ' - Angular 20');
+        this.pageInfo = event;
+      });
+  }
+}

theme/packages/dark/src/app/layouts/full/vertical/header/header.component.html

@@ -0,0 +1,301 @@
+<mat-toolbar class="topbar">
+  <!-- --------------------------------------------------------------- -->
+  <!-- Desktop Menu -->
+  @if(showToggle) {
+  <button
+    mat-icon-button
+    (click)="toggleCollapsed.emit()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+  </button>
+  }
+
+  <!-- Mobile Menu -->
+  @if(!showToggle) {
+  <button
+    mat-icon-button
+    (click)="toggleMobileNav.emit()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+  </button>
+  }
+  <!-- --------------------------------------------------------------- -->
+
+  <!-- --------------------------------------------------------------- -->
+  <!--  Search -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button
+    (click)="openDialog()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="search" class="icon-20 d-flex"></i-tabler>
+  </button>
+
+  <div class="d-none d-lg-flex">
+    <!-- --------------------------------------------------------------- -->
+    <!--  Links -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-button
+      [matMenuTriggerFor]="appsmenu"
+      aria-label="Notifications"
+    >
+      <div class="d-flex align-items-center">
+        Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
+      </div>
+    </button>
+    <mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
+      <div class="row">
+        <div class="col-sm-8 b-r-1 p-r-0">
+          <div class="p-32 p-b-0">
+            <div class="row">
+              @for(appdd of apps; track appdd.title) {
+              <div class="col-sm-6 text-hover-primary">
+                <a
+                  [routerLink]="[appdd.link]"
+                  class="d-flex align-items-center text-decoration-none m-b-24"
+                >
+                  <span
+                    class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
+                  >
+                    <img [src]="appdd.img" width="20" />
+                  </span>
+
+                  <div class="m-l-16">
+                    <h5
+                      class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+                    >
+                      {{ appdd.title }}
+                    </h5>
+                    <span class="f-s-12 text-body">{{ appdd.subtitle }}</span>
+                  </div>
+                </a>
+              </div>
+              }
+            </div>
+          </div>
+          <div
+            class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
+          >
+            <span
+              class="d-flex align-items-center  f-s-16 f-w-500"
+            >
+              <i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
+              Asked Questions
+            </span>
+            <a
+              [routerLink]="['/theme-pages/faq']"
+              mat-flat-button
+              color="primary"
+              >Check</a
+            >
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="p-x-16 p-y-32">
+            <h4 class="f-s-18 f-w-600  m-b-16">Quick Links</h4>
+            @for(quicklink of quicklinks; track quicklink.title) {
+            <div class="text-hover-primary">
+              <a
+                [routerLink]="[quicklink.link]"
+                class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
+                >{{ quicklink.title }}</a
+              >
+            </div>
+            }
+          </div>
+        </div>
+      </div>
+    </mat-menu>
+    <a mat-button [routerLink]="['/apps/chat']">Chat</a>
+    <a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
+    <a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
+  </div>
+
+  <span class="flex-1-auto"></span>
+
+  <!-- Mobile Menu -->
+  <button
+    mat-icon-button
+    (click)="toggleMobileFilterNav.emit()"
+    class="d-flex d-lg-none justify-content-center"
+  >
+    <i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
+  </button>
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- langugage Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
+    <img
+      [src]="selectedLanguage.icon"
+      class="rounded-circle object-cover icon-20"
+    />
+  </button>
+  <mat-menu #flags="matMenu" class="cardWithShadow">
+    @for(lang of languages; track lang.icon) {
+    <button mat-menu-item (click)="changeLanguage(lang)">
+      <div class="d-flex align-items-center">
+        <img
+          [src]="lang.icon"
+          class="rounded-circle object-cover m-r-8 icon-20"
+        />
+        <span class=" f-s-14">{{ lang.language }}</span>
+      </div>
+    </button>
+    }
+  </mat-menu>
+
+  @if(options.theme=='light'){
+    <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
+      <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
+    </button>
+    }@else{
+    <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
+      <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+    </button>
+  }
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- Notification Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button matBadge="5"
+    [matMenuTriggerFor]="notificationmenu"
+    aria-label="Notifications" class="m-x-5 notification-badge"
+  >
+    <i-tabler
+      class="d-flex"
+      name="bell"
+    ></i-tabler>
+  </button>
+  <mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
+    <div class="d-flex align-items-center p-x-32 p-y-16">
+      <h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
+      <span class="m-l-auto">
+        <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
+          >5 new</span
+        >
+      </span>
+    </div>
+
+    @for(notification of notifications; track notification.title) {
+    <button mat-menu-item class="p-x-32 p-y-16">
+      <div class="d-flex align-items-center">
+        <img [src]="notification.img" class="rounded-circle" width="48" />
+        <div class="m-l-16">
+          <h5 class="f-s-14 f-w-600 m-0 ">
+            {{ notification.title }}
+          </h5>
+          <span>{{ notification.subtitle }}</span>
+        </div>
+      </div>
+    </button>
+    }
+
+    <div class="p-y-12 p-x-32">
+      <button mat-stroked-button color="primary" class="w-100">
+        See all notifications
+      </button>
+    </div>
+  </mat-menu>
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- profile Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button
+    [matMenuTriggerFor]="profilemenu"
+    aria-label="Notifications" class="m-l-8"
+  >
+    <img
+      src="/assets/images/profile/user-1.jpg"
+      class="rounded-circle object-cover icon-35 profile-dd"
+      width="35"
+    />
+  </button>
+  <mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
+    <ng-scrollbar class="position-relative" style="height: 647px">
+      <div class="p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
+
+        <div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
+          <img
+            src="/assets/images/profile/user-1.jpg"
+            class="rounded-circle"
+            width="95"
+          />
+          <div class="m-l-16">
+            <h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
+            <span class="f-s-14 d-block m-b-4">Designer</span>
+            <span class="d-flex align-items-center">
+              <i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
+              info&#64;modernize.com
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="p-x-32">
+        @for(profile of profiledd; track profile.title) {
+        <a
+          class="p-y-16 text-decoration-none d-block text-hover-primary"
+          [routerLink]="[profile.link]"
+        >
+          <div class="d-flex align-items-center">
+            <button
+              mat-mini-fab
+              class="text-primary bg-light shadow-none rounded"
+            >
+              <img [src]="profile.img" width="20" />
+            </button>
+
+            <div class="m-l-16">
+              <h5
+                class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+              >
+                {{ profile.title }}
+              </h5>
+              <span class="f-s-14 text-body">{{ profile.subtitle }}</span>
+            </div>
+          </div>
+        </a>
+        }
+
+        <!-- upgrade -->
+        <div
+          class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
+        >
+          <div class="d-flex align-items-center">
+            <div>
+              <h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
+                Unlimited <br />
+                Access
+              </h5>
+              <button mat-flat-button color="primary">Upgrade</button>
+            </div>
+            <div class="m-l-auto">
+              <img
+                src="/assets/images/backgrounds/unlimited-bg.png"
+                alt="upgrade-bg"
+                class="upgrade-bg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-y-12 p-x-32">
+        <a
+          [routerLink]="['/authentication/login']"
+          mat-stroked-button
+          color="primary"
+          class="w-100"
+          >Logout</a
+        >
+      </div>
+    </ng-scrollbar>
+  </mat-menu>
+</mat-toolbar>

theme/packages/dark/src/app/layouts/full/vertical/sidebar/nav-item/nav-item.component.ts

@@ -0,0 +1,103 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { NavItem } from './nav-item';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../../services/nav.service';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-nav-item',
+  imports: [TranslateModule, TablerIconsModule, MaterialModule, CommonModule],
+  templateUrl: './nav-item.component.html',
+  styleUrls: [],
+  animations: [
+    trigger('indicatorRotate', [
+      state('collapsed', style({ transform: 'rotate(0deg)' })),
+      state('expanded', style({ transform: 'rotate(180deg)' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+    ]),
+  ]
+})
+export class AppNavItemComponent implements OnChanges {
+  @Output() toggleMobileLink: any = new EventEmitter<void>();
+  @Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  expanded: any = false;
+  disabled: any = false;
+  twoLines: any = false;
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() item: NavItem | any;
+  @Input() depth: any;
+
+  constructor(public navService: NavService, public router: Router) {
+    if (this.depth === undefined) {
+      this.depth = 0;
+    }
+  }
+
+  ngOnChanges() {
+    const url = this.navService.currentUrl();
+    if (this.item.route && url) {
+      this.expanded = url.indexOf(`/${this.item.route}`) === 0;
+      this.ariaExpanded = this.expanded;
+    }
+  }
+
+  onItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.route]);
+
+    }
+    if (item.children && item.children.length) {
+      this.expanded = !this.expanded;
+    }
+    //scroll
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+    if (!this.expanded) {
+      if (window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+
+  onSubItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      if (this.expanded && window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+
+  isDirectlyActive(item: NavItem): boolean {
+    return !!item.route && this.router.isActive(item.route, true);
+  }
+
+  isChildActive(item: NavItem): boolean {
+    if (!item.children) return false;
+    return item.children.some(
+      (child) => this.isDirectlyActive(child) || this.isChildActive(child)
+    );
+  }
+
+}

theme/packages/dark/src/app/layouts/full/vertical/sidebar/sidebar-data.ts

@@ -0,0 +1,705 @@
+import { NavItem } from './nav-item/nav-item';
+
+export const navItems: NavItem[] = [
+  {
+    navCap: 'Home',
+  },
+  {
+    displayName: 'Analytical',
+    iconName: 'aperture',
+    route: '/dashboards/dashboard1',
+  },
+  {
+    displayName: 'eCommerce',
+    iconName: 'shopping-cart',
+    route: '/dashboards/dashboard2',
+  },
+  {
+    displayName: 'Frontend pages',
+    iconName: 'app-window',
+    route: 'front-pages',
+    children: [
+      {
+        displayName: 'Home Page',
+        iconName: 'point',
+        route: 'front-pages/homepage',
+      } ,
+      {
+        displayName: 'About Us',
+        iconName: 'point',
+        route: 'front-pages/about',
+      } ,
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'front-pages/blog',
+      } ,
+      {
+        displayName: 'Blog Details',
+        iconName: 'point',
+        route: 'front-pages/blog-details', 
+      } ,
+      {
+        displayName: 'Portfolio',
+        iconName: 'point',
+        route: 'front-pages/portfolio',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'front-pages/pricing',
+      },
+      {
+        displayName: 'Contact',
+        iconName: 'point',
+        route: 'front-pages/contact',
+      }
+    ]
+  }, 
+  {
+    navCap: 'Apps',
+  },
+  {
+    displayName: 'Chat',
+    iconName: 'message-2',
+    route: 'apps/chat',
+  },
+  {
+    displayName: 'Calendar',
+    iconName: 'calendar-event',
+    route: 'apps/calendar',
+  },
+  {
+    displayName: 'Email',
+    iconName: 'mail',
+    route: 'apps/email/inbox',
+  },
+  {
+    displayName: 'Kanban',
+    iconName: 'checklist',
+    route: 'apps/kanban',
+  },
+  {
+    displayName: 'User Profile',
+    iconName: 'user-circle',
+    route: 'apps/profile-details',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'New',
+    children: [
+      {
+        displayName: 'Profile',
+        iconName: 'point',
+        route: 'apps/profile-details/profile',
+      },
+      {
+        displayName: 'Followers',
+        iconName: 'point',
+        route: 'apps/profile-details/followers',
+      },
+      {
+        displayName: 'Friends',
+        iconName: 'point',
+        route: 'apps/profile-details/friends',
+      },
+      {
+        displayName: 'Gellary',
+        iconName: 'point',
+        route: 'apps/profile-details/gallery',
+      },
+    ],
+  },
+  {
+    displayName: 'Ecommerce',
+    iconName: 'basket',
+    route: 'apps/product',
+    chip: true,
+    chipClass: 'border-error text-error',
+    chipContent: 'New',
+    children: [
+      {
+        displayName: 'Product List',
+        iconName: 'point',
+        route: 'apps/product/product-list',
+      },
+      {
+        displayName: 'Add Product',
+        iconName: 'point',
+        route: 'apps/product/add-product',
+      },
+      {
+        displayName: 'Edit Product',
+        iconName: 'point',
+        route: 'apps/product/edit-product',
+      },
+      {
+        displayName: 'Shop',
+        iconName: 'point',
+        route: 'apps/product/shop',
+      },
+    ],
+  },
+  {
+    displayName: 'Contacts',
+    iconName: 'phone',
+    route: 'apps/contacts',
+  },
+  {
+    displayName: 'Courses',
+    iconName: 'certificate',
+    route: 'apps/courses',
+  },
+  {
+    displayName: 'Employee',
+    iconName: 'brand-ctemplar',
+    route: 'apps/employee',
+  },
+  {
+    displayName: 'Notes',
+    iconName: 'note',
+    route: 'apps/notes',
+  },
+  {
+    displayName: 'Tickets',
+    iconName: 'ticket',
+    route: 'apps/tickets',
+  },
+  {
+    displayName: 'Contact List',
+    iconName: 'phone',
+    route: 'apps/contact-list',
+  },
+  {
+    displayName: 'Invoice',
+    iconName: 'file-invoice',
+    route: 'apps/invoice',
+    children: [
+      {
+        displayName: 'List',
+        iconName: 'point',
+        route: 'apps/invoice/list',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        route: 'apps/invoice/viewInvoice/101',
+      },
+      {
+        displayName: 'Create',
+        iconName: 'point',
+        route: 'apps/invoice/addInvoice',
+      },
+      {
+        displayName: 'Edit',
+        iconName: 'point',
+        route: 'apps/invoice/editinvoice/101',
+      },
+    ],
+  },
+  {
+    displayName: 'ToDo',
+    iconName: 'edit',
+    route: 'apps/todo',
+  },
+  {
+    displayName: 'Blog',
+    iconName: 'chart-donut-3',
+    route: 'apps/blog',
+    children: [
+      {
+        displayName: 'Post',
+        iconName: 'point',
+        route: 'apps/blog/post',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
+      },
+    ],
+  },
+  {
+    navCap: 'Pages',
+  },
+  {
+    displayName: 'Roll Base Access',
+    iconName: 'lock-access',
+    route: 'apps/permission',
+  },
+  {
+    displayName: 'Treeview',
+    iconName: 'git-merge',
+    route: 'theme-pages/treeview',
+  },
+  {
+    displayName: 'Pricing',
+    iconName: 'currency-dollar',
+    route: 'theme-pages/pricing',
+  },
+  {
+    displayName: 'Account Setting',
+    iconName: 'user-circle',
+    route: 'theme-pages/account-setting',
+  },
+  {
+    displayName: 'FAQ',
+    iconName: 'help',
+    route: 'theme-pages/faq',
+  },
+  {
+    displayName: 'Landingpage',
+    iconName: 'app-window',
+    route: 'landingpage',
+  },
+  {
+    displayName: 'Widgets',
+    iconName: 'layout',
+    route: 'widgets',
+    children: [
+      {
+        displayName: 'Cards',
+        iconName: 'point',
+        route: 'widgets/cards',
+      },
+      {
+        displayName: 'Banners',
+        iconName: 'point',
+        route: 'widgets/banners',
+      },
+      {
+        displayName: 'Charts',
+        iconName: 'point',
+        route: 'widgets/charts',
+      },
+    ],
+  },
+  {
+    navCap: 'Forms',
+  },
+  {
+    displayName: 'Form elements',
+    iconName: 'apps',
+    route: 'forms/forms-elements',
+    children: [
+      {
+        displayName: 'Autocomplete',
+        iconName: 'point',
+        route: 'forms/forms-elements/autocomplete',
+      },
+      {
+        displayName: 'Button',
+        iconName: 'point',
+        route: 'forms/forms-elements/button',
+      },
+      {
+        displayName: 'Checkbox',
+        iconName: 'point',
+        route: 'forms/forms-elements/checkbox',
+      },
+      {
+        displayName: 'Radio',
+        iconName: 'point',
+        route: 'forms/forms-elements/radio',
+      },
+      {
+        displayName: 'Datepicker',
+        iconName: 'point',
+        route: 'forms/forms-elements/datepicker',
+      },
+    ],
+  },
+  {
+    displayName: 'Form Layouts',
+    iconName: 'file-description',
+    route: '/forms/form-layouts',
+  },
+  {
+    displayName: 'Form Horizontal',
+    iconName: 'box-align-bottom',
+    route: '/forms/form-horizontal',
+  },
+  {
+    displayName: 'Form Vertical',
+    iconName: 'box-align-left',
+    route: '/forms/form-vertical',
+  },
+  {
+    displayName: 'Form Wizard',
+    iconName: 'files',
+    route: '/forms/form-wizard',
+  },
+  {
+    displayName: 'Toastr',
+    iconName: 'notification',
+    route: '/forms/form-toastr',
+  },
+  {
+    displayName: 'Editor',
+    iconName: 'edit',
+    route: '/forms/form-editor',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'New',
+  },
+  {
+    navCap: 'Tables',
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'layout',
+    route: 'tables',
+    children: [
+      {
+        displayName: 'Basic Table',
+        iconName: 'point',
+        route: 'tables/basic-table',
+      },
+      {
+        displayName: 'Dynamic Table',
+        iconName: 'point',
+        route: 'tables/dynamic-table',
+      },
+      {
+        displayName: 'Expand Table',
+        iconName: 'point',
+        route: 'tables/expand-table',
+      },
+      {
+        displayName: 'Filterable Table',
+        iconName: 'point',
+        route: 'tables/filterable-table',
+      },
+      {
+        displayName: 'Footer Row Table',
+        iconName: 'point',
+        route: 'tables/footer-row-table',
+      },
+      {
+        displayName: 'HTTP Table',
+        iconName: 'point',
+        route: 'tables/http-table',
+      },
+      {
+        displayName: 'Mix Table',
+        iconName: 'point',
+        route: 'tables/mix-table',
+      },
+      {
+        displayName: 'Multi Header Footer',
+        iconName: 'point',
+        route: 'tables/multi-header-footer-table',
+      },
+      {
+        displayName: 'Pagination Table',
+        iconName: 'point',
+        route: 'tables/pagination-table',
+      },
+      {
+        displayName: 'Row Context Table',
+        iconName: 'point',
+        route: 'tables/row-context-table',
+      },
+      {
+        displayName: 'Selection Table',
+        iconName: 'point',
+        route: 'tables/selection-table',
+      },
+      {
+        displayName: 'Sortable Table',
+        iconName: 'point',
+        route: 'tables/sortable-table',
+      },
+      {
+        displayName: 'Sticky Column',
+        iconName: 'point',
+        route: 'tables/sticky-column-table',
+      },
+      {
+        displayName: 'Sticky Header Footer',
+        iconName: 'point',
+        route: 'tables/sticky-header-footer-table',
+      },
+    ],
+  },
+  {
+    displayName: 'Data table',
+    iconName: 'border-outer',
+    route: '/datatable/kichen-sink',
+  },
+  {
+    navCap: 'Chart',
+  },
+  {
+    displayName: 'Line',
+    iconName: 'chart-line',
+    route: '/charts/line',
+  },
+  {
+    displayName: 'Gredient',
+    iconName: 'chart-arcs',
+    route: '/charts/gredient',
+  },
+  {
+    displayName: 'Area',
+    iconName: 'chart-area',
+    route: '/charts/area',
+  },
+  {
+    displayName: 'Candlestick',
+    iconName: 'chart-candle',
+    route: '/charts/candlestick',
+  },
+  {
+    displayName: 'Column',
+    iconName: 'chart-dots',
+    route: '/charts/column',
+  },
+  {
+    displayName: 'Doughnut & Pie',
+    iconName: 'chart-donut-3',
+    route: '/charts/doughnut-pie',
+  },
+  {
+    displayName: 'Radialbar & Radar',
+    iconName: 'chart-radar',
+    route: '/charts/radial-radar',
+  },
+  {
+    navCap: 'UI',
+  },
+  {
+    displayName: 'Ui Components',
+    iconName: 'box',
+    route: 'ui-components',
+    children: [
+      {
+        displayName: 'Badge',
+        iconName: 'point',
+        route: 'ui-components/badge',
+      },
+      {
+        displayName: 'Expansion Panel',
+        iconName: 'point',
+        route: 'ui-components/expansion',
+      },
+      {
+        displayName: 'Chips',
+        iconName: 'point',
+        route: 'ui-components/chips',
+      },
+      {
+        displayName: 'Dialog',
+        iconName: 'point',
+        route: 'ui-components/dialog',
+      },
+      {
+        displayName: 'Lists',
+        iconName: 'point',
+        route: 'ui-components/lists',
+      },
+      {
+        displayName: 'Divider',
+        iconName: 'point',
+        route: 'ui-components/divider',
+      },
+      {
+        displayName: 'Menu',
+        iconName: 'point',
+        route: 'ui-components/menu',
+      },
+      {
+        displayName: 'Paginator',
+        iconName: 'point',
+        route: 'ui-components/paginator',
+      },
+      {
+        displayName: 'Progress Bar',
+        iconName: 'point',
+        route: 'ui-components/progress',
+      },
+      {
+        displayName: 'Progress Spinner',
+        iconName: 'point',
+        route: 'ui-components/progress-spinner',
+      },
+      {
+        displayName: 'Ripples',
+        iconName: 'point',
+        route: 'ui-components/ripples',
+      },
+      {
+        displayName: 'Slide Toggle',
+        iconName: 'point',
+        route: 'ui-components/slide-toggle',
+      },
+      {
+        displayName: 'Slider',
+        iconName: 'point',
+        route: 'ui-components/slider',
+      },
+      {
+        displayName: 'Snackbar',
+        iconName: 'point',
+        route: 'ui-components/snackbar',
+      },
+      {
+        displayName: 'Tabs',
+        iconName: 'point',
+        route: 'ui-components/tabs',
+      },
+      {
+        displayName: 'Toolbar',
+        iconName: 'point',
+        route: 'ui-components/toolbar',
+      },
+      {
+        displayName: 'Tooltips',
+        iconName: 'point',
+        route: 'ui-components/tooltips',
+      },
+    ],
+  },
+  {
+    navCap: 'Auth',
+  },
+  {
+    displayName: 'Login',
+    iconName: 'login',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Login 1',
+        iconName: 'point',
+        route: '/authentication/login',
+      },
+      {
+        displayName: 'Boxed Login',
+        iconName: 'point',
+        route: '/authentication/boxed-login',
+      },
+    ],
+  },
+  {
+    displayName: 'Register',
+    iconName: 'user-plus',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Register',
+        iconName: 'point',
+        route: '/authentication/side-register',
+      },
+      {
+        displayName: 'Boxed Register',
+        iconName: 'point',
+        route: '/authentication/boxed-register',
+      },
+    ],
+  },
+  {
+    displayName: 'Forgot Password',
+    iconName: 'rotate',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Forgot Password',
+        iconName: 'point',
+        route: '/authentication/side-forgot-pwd',
+      },
+      {
+        displayName: 'Boxed Forgot Password',
+        iconName: 'point',
+        route: '/authentication/boxed-forgot-pwd',
+      },
+    ],
+  },
+  {
+    displayName: 'Two Steps',
+    iconName: 'zoom-code',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Two Steps',
+        iconName: 'point',
+        route: '/authentication/side-two-steps',
+      },
+      {
+        displayName: 'Boxed Two Steps',
+        iconName: 'point',
+        route: '/authentication/boxed-two-steps',
+      },
+    ],
+  },
+  {
+    displayName: 'Error',
+    iconName: 'alert-circle',
+    route: '/authentication/error',
+  },
+  {
+    displayName: 'Maintenance',
+    iconName: 'settings',
+    route: '/authentication/maintenance',
+  },
+  {
+    navCap: 'Other',
+  },
+  {
+    displayName: 'Menu Level',
+    iconName: 'box-multiple',
+    route: '/menu-level',
+    children: [
+      {
+        displayName: 'Menu 1',
+        iconName: 'point',
+        route: '/menu-1',
+        children: [
+          {
+            displayName: 'Menu 1',
+            iconName: 'point',
+            route: '/menu-1',
+          },
+
+          {
+            displayName: 'Menu 2',
+            iconName: 'point',
+            route: '/menu-2',
+          },
+        ],
+      },
+
+      {
+        displayName: 'Menu 2',
+        iconName: 'point',
+        route: '/menu-2',
+      },
+    ],
+  },
+  {
+    displayName: 'Disabled',
+    iconName: 'ban',
+    route: '/disabled',
+    disabled: true,
+  },
+  {
+    displayName: 'Chip',
+    iconName: 'mood-smile',
+    route: '/',
+    chip: true,
+    chipClass: 'bg-primary text-white',
+    chipContent: '9',
+  },
+  {
+    displayName: 'Outlined',
+    iconName: 'mood-smile',
+    route: '/',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'outlined',
+  },
+  {
+    displayName: 'External Link',
+    iconName: 'star',
+    route: 'https://www.google.com/',
+    external: true,
+  },
+];