Initial commit - Master Admin UI

src/app/shared/services/nav.service.ts

@@ -0,0 +1,172 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import { Router } from '@angular/router';
+// Menu
+export interface Menu {
+  headTitle?: string;
+  headTitle2?: string;
+  path?: string;
+  title?: string;
+  icon?: string;
+  type?: string;
+  badgeValue?: string;
+  badgeClass?: string;
+  badgeText?: string;
+  active?: boolean;
+  selected?: boolean;
+  bookmark?: boolean;
+  children?: Menu[];
+  children2?: Menu[];
+  Menusub?: boolean;
+  target?: boolean;
+  menutype?: string,
+  dirchange?: boolean,
+  nochild?: any
+
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavService implements OnDestroy {
+  private unsubscriber: Subject<any> = new Subject();
+  public screenWidth: BehaviorSubject<number> = new BehaviorSubject(
+    window.innerWidth
+  );
+
+  // Search Box
+  public search = false;
+
+  // Language
+  public language = false;
+
+  // Mega Menu
+  public megaMenu = false;
+  public levelMenu = false;
+  public megaMenuColapse: boolean = window.innerWidth < 1199 ? true : false;
+
+  // Collapse Sidebar
+  public collapseSidebar: boolean = window.innerWidth < 991 ? true : false;
+
+  // For Horizontal Layout Mobile
+  public horizontal: boolean = window.innerWidth < 991 ? false : true;
+
+  // Full screen
+  public fullScreen = false;
+  active: any;
+
+  constructor(private router: Router) {
+    this.setScreenWidth(window.innerWidth);
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(1000), takeUntil(this.unsubscriber))
+      .subscribe((evt: any) => {
+        this.setScreenWidth(evt.target.innerWidth);
+        if (evt.target.innerWidth < 991) {
+          this.collapseSidebar = true;
+          this.megaMenu = false;
+          this.levelMenu = false;
+        }
+        if (evt.target.innerWidth < 1199) {
+          this.megaMenuColapse = true;
+        }
+      });
+    if (window.innerWidth < 991) {
+      // Detect Route change sidebar close
+      this.router.events.subscribe((event) => {
+        this.collapseSidebar = true;
+        this.megaMenu = false;
+        this.levelMenu = false;
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    this.unsubscriber.next;
+    this.unsubscriber.complete();
+  }
+
+  private setScreenWidth(width: number): void {
+    this.screenWidth.next(width);
+  }
+
+  MENUITEMS: Menu[] = [
+    // Dashboard
+    { headTitle: 'MAIN' },
+    {
+      title: 'Dashboards',
+      icon: `<i class="bx bx-home side-menu__icon"></i>`,
+      type: 'sub',
+      badgeClass: 'warning/10',
+      badgeText: 'warning',
+      badgeValue: '12',
+      selected: false,
+      active: false,
+      dirchange: false,
+      children: [
+        { path: '/dashboards/crm', title: 'CRM', type: 'link', dirchange: false, },
+
+      ],
+    },
+
+
+
+
+    {
+      title: 'Error',
+      type: 'sub',
+      icon: `<i class="bx bx-error side-menu__icon"></i>`,
+      active: false,
+      dirchange: false,
+      children: [
+
+        {
+          path: 'error/error404',
+          title: 'Error 404',
+          type: 'link',
+          dirchange: false,
+        },
+
+      ],
+    },
+
+
+    {
+      title: 'Nested Menu',
+      icon: `<i class="bx bx-layer side-menu__icon"></i>`,
+      type: 'sub',
+      active: false,
+      children: [
+        {
+          title: 'Nested-1',
+          dirchange: false,
+          type: 'empty',
+          active: false,
+          selected: false,
+          path: '/nested-menu/nested-1',
+        },
+        {
+          title: 'Nested-2',
+          type: 'sub',
+          active: false,
+          children: [
+            {
+              title: 'Nested-2.1',
+              type: 'empty',
+              active: false,
+            },
+            {
+              title: 'Nested-2.2',
+              type: 'empty',
+              active: false,
+            }
+          ],
+        },
+      ],
+    },
+
+
+  ];
+
+  items = new BehaviorSubject<Menu[]>(this.MENUITEMS);
+}