tango-app-ui-shared 3.0.0

package/src/lib/modules/layout/layout.module.ts

@@ -0,0 +1,93 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InlineSVGModule } from 'ng-inline-svg-2';
+import { RouterModule, Routes } from '@angular/router';
+import {
+  NgbDropdownModule,
+  NgbProgressbarModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+// import { ExtrasModule } from '../partials/layout/extras/extras.module';
+// import {
+//   DrawersModule,
+//   DropdownMenusModule,
+//   ModalsModule,
+//   EngagesModule,
+// } from '../partials';
+// import { EngagesComponent } from '../partials/layout/engages/engages.component';
+// import { ThemeModeModule } from '../partials/layout/theme-mode-switcher/theme-mode.module';
+import { KeeniconComponent } from './keenicon/keenicon.component';
+import { TranslationModule } from '../../i18n';
+import { LayoutComponent } from './layout/layout.component';
+import { HeaderComponent } from './header/header.component';
+import { ContentComponent } from './content/content.component';
+import { FooterComponent } from './footer/footer.component';
+import { ScriptsInitComponent } from './scripts-init/scripts-init.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { PageTitleComponent } from './header/page-title/page-title.component';
+import { HeaderMenuComponent } from './header/header-menu/header-menu.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { SidebarLogoComponent } from './sidebar/sidebar-logo/sidebar-logo.component';
+import { SidebarMenuComponent } from './sidebar/sidebar-menu/sidebar-menu.component';
+import { SidebarFooterComponent } from './sidebar/sidebar-footer/sidebar-footer.component';
+import { NavbarComponent } from './header/navbar/navbar.component';
+import { AccountingComponent } from './toolbar/accounting/accounting.component';
+import { ClassicComponent } from './toolbar/classic/classic.component';
+import { ExtendedComponent } from './toolbar/extended/extended.component';
+import { ReportsComponent } from './toolbar/reports/reports.component';
+import { SaasComponent } from './toolbar/saas/saas.component';
+import { Routing } from '../../routes/routing';
+import { LayoutScrollTopComponent } from './scroll-top/scroll-top.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: Routing,
+  },
+];
+
+@NgModule({
+  declarations: [
+    LayoutComponent,
+    HeaderComponent,
+    ContentComponent,
+    FooterComponent,
+    ScriptsInitComponent,
+    ToolbarComponent,
+    PageTitleComponent,
+    HeaderMenuComponent,
+    // EngagesComponent,
+    SidebarComponent,
+    SidebarLogoComponent,
+    SidebarMenuComponent,
+    SidebarFooterComponent,
+    NavbarComponent,
+    AccountingComponent,
+    ClassicComponent,
+    ExtendedComponent,
+    ReportsComponent,
+    SaasComponent,
+    KeeniconComponent,
+    LayoutScrollTopComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    TranslationModule,
+    InlineSVGModule,
+    NgbDropdownModule,
+    NgbProgressbarModule,
+    // ExtrasModule,
+    // ModalsModule,
+    // DrawersModule,
+    // EngagesModule,
+    // DropdownMenusModule,
+    NgbTooltipModule,
+    TranslateModule,
+    // ThemeModeModule,
+  ],
+  exports: [RouterModule],
+})
+export class LayoutModule {}

package/src/lib/modules/layout/scripts-init/scripts-init.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ResolveEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import {
+  ToggleComponent,
+  ScrollTopComponent,
+  DrawerComponent,
+  StickyComponent,
+  MenuComponent,
+  ScrollComponent,
+} from 'tango-app-metronics';
+import { Title } from '@angular/platform-browser';
+import { LayoutService, PageInfoService } from 'tango-app-metronics';
+
+@Component({
+  selector: 'lib-scripts-init',
+  templateUrl: './scripts-init.component.html',
+})
+export class ScriptsInitComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+  constructor(
+    private layout: LayoutService,
+    private pageInfo: PageInfoService,
+    private router: Router,
+    private titleService: Title,
+  ) {
+    const initPageInfo = () => {
+      setTimeout(() => {
+        // this.pageInfo.calculateTitle();
+        // this.pageInfo.calculateBreadcrumbs();
+
+        this.pageInfo.title.asObservable().subscribe((title) => {
+          this.titleService.setTitle(title + ' - Metronic');
+        });
+      }, 10);
+    };
+
+    initPageInfo();
+    // subscribe to router events
+    this.router.events
+      .pipe(filter((event) => event instanceof ResolveEnd))
+      .subscribe(initPageInfo);
+  }
+
+  ngOnInit(): void {
+    this.pluginsInitialization();
+    const layoutUpdateSubscription = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe(() => {
+        this.pluginsReInitialization();
+      });
+    this.unsubscribe.push(layoutUpdateSubscription);
+  }
+
+  pluginsInitialization() {
+    setTimeout(() => {
+      ToggleComponent.bootstrap();
+      ScrollTopComponent.bootstrap();
+      DrawerComponent.bootstrap();
+      StickyComponent.bootstrap();
+      MenuComponent.bootstrap();
+      ScrollComponent.bootstrap();
+    }, 200);
+  }
+
+  pluginsReInitialization() {
+    setTimeout(() => {
+      ToggleComponent.reinitialization();
+      ScrollTopComponent.reinitialization();
+      DrawerComponent.reinitialization();
+      StickyComponent.bootstrap();
+      MenuComponent.reinitialization();
+      ScrollComponent.reinitialization();
+    }, 100);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/scroll-top/scroll-top.component.html

@@ -0,0 +1 @@
+<lib-keenicon name="arrow-up" class=""></lib-keenicon>

package/src/lib/modules/layout/scroll-top/scroll-top.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
+import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import {
+  StickyComponent,
+  ScrollTopComponent,
+  MenuComponent,
+  ToggleComponent,
+  DrawerComponent,
+} from 'tango-app-metronics';
+
+@Component({
+  selector: 'lib-scroll-top',
+  templateUrl: './scroll-top.component.html',
+})
+export class LayoutScrollTopComponent implements OnInit, OnDestroy {
+  @HostBinding('class') class = 'kt_scrolltop';
+  @HostBinding('id') id = 'scrolltop';
+  @HostBinding('attr.data-kt-scrolltop') dataKtScrolltop = 'true';
+
+  private unsubscribe: Subscription[] = [];
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.routingChanges();
+  }
+
+  routingChanges() {
+    const routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
+        this.pluginsReinitialization();
+        this.updateHeaderSticky();
+        setTimeout(() => {
+          this.scrollTop();
+        }, 0);
+      }
+    });
+    this.unsubscribe.push(routerSubscription);
+  }
+
+  updateHeaderSticky() {
+    const stickyHeader = document.body.querySelectorAll(
+      `[data-kt-sticky-name="header"]`
+    );
+    if (stickyHeader && stickyHeader.length > 0) {
+      const sticky = StickyComponent.getInstance(
+        stickyHeader[0] as HTMLElement
+      );
+      if (sticky) {
+        sticky.update();
+      }
+    }
+  }
+
+  scrollTop() {
+    ScrollTopComponent.goTop();
+  }
+
+  pluginsReinitialization() {
+    setTimeout(() => {
+      // ScrollTopComponent.reinitialization()
+      MenuComponent.reinitialization();
+      StickyComponent.reInitialization();
+      setTimeout(() => {
+        ToggleComponent.reinitialization();
+        DrawerComponent.reinitialization();
+        // ScrollComponent.reinitialization()
+      }, 70);
+    }, 140);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -0,0 +1,9 @@
+<a target="_blank" 
+  class="btn btn-flex flex-center btn-custom btn-primary overflow-hidden text-nowrap px-0 h-40px w-100"
+  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click" title="Metronic Docs & Components">
+
+  <span class="btn-label">
+    Docs & Components
+  </span>
+  <lib-keenicon name="document" class="fs-2 m-0"></lib-keenicon>
+</a>

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarFooterComponent } from './sidebar-footer.component';
+
+describe('SidebarFooterComponent', () => {
+  let component: SidebarFooterComponent;
+  let fixture: ComponentFixture<SidebarFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarFooterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SidebarFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-sidebar-footer',
+  templateUrl: './sidebar-footer.component.html',
+  styleUrls: ['./sidebar-footer.component.scss'],
+})
+export class SidebarFooterComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.html

@@ -0,0 +1,26 @@
+<!--begin::Logo image-->
+<a routerLink="/dashboard">
+  <ng-container *ngIf="currentLayoutType === 'dark-sidebar'">
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg" class="h-40px app-sidebar-logo-default" />
+  </ng-container>
+  <ng-container *ngIf="currentLayoutType !== 'dark-sidebar'">
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg" class="h-40px app-sidebar-logo-default theme-light-show" />
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg"
+      class="h-40px app-sidebar-logo-default theme-dark-show" />
+  </ng-container>
+
+  <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg" class="h-38px app-sidebar-logo-minimize" />
+</a>
+<!--end::Logo image-->
+
+
+<ng-container *ngIf="toggleEnabled">
+  <!--begin::Sidebar toggle-->
+  <div id="kt_app_sidebar_toggle"
+    class="app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none"
+    [ngClass]="toggleButtonClass" data-kt-toggle="true" [attr.data-kt-toggle-state]="toggleState"
+    data-kt-toggle-target="body" [attr.data-kt-toggle-name]="toggleAttr">
+    <lib-keenicon name="double-left" class="fs-2 rotate-180"></lib-keenicon>
+  </div>
+  <!--end::Sidebar toggle-->
+</ng-container>

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarLogoComponent } from './sidebar-logo.component';
+
+describe('SidebarLogoComponent', () => {
+  let component: SidebarLogoComponent;
+  let fixture: ComponentFixture<SidebarLogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarLogoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SidebarLogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LayoutService } from 'tango-app-metronics';
+import { LayoutType } from 'tango-app-metronics';
+
+@Component({
+  selector: 'lib-sidebar-logo',
+  templateUrl: './sidebar-logo.component.html',
+  styleUrls: ['./sidebar-logo.component.scss'],
+})
+export class SidebarLogoComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+  @Input() toggleButtonClass: string = '';
+  @Input() toggleEnabled: boolean;
+  @Input() toggleType: string = '';
+  @Input() toggleState: string = '';
+  currentLayoutType: LayoutType | null;
+
+  toggleAttr: string;
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    this.toggleAttr = `app-sidebar-${this.toggleType}`;
+    const layoutSubscr = this.layout.currentLayoutTypeSubject
+      .asObservable()
+      .subscribe((layout) => {
+        this.currentLayoutType = layout;
+      });
+    this.unsubscribe.push(layoutSubscr);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/sidebar/sidebar-menu/sidebar-menu.component.html

@@ -0,0 +1,276 @@
+<!--begin::Menu wrapper-->
+<div id="kt_app_sidebar_menu_scroll" class="scroll-y my-5 mx-3" data-kt-scroll="true" data-kt-scroll-activate="true"
+  data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer"
+  data-kt-scroll-wrappers="#kt_app_sidebar_menu" data-kt-scroll-offset="5px" data-kt-scroll-save-state="true">
+  <!--begin::Menu-->
+  <div class="menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6" id="#kt_app_sidebar_menu"
+    data-kt-menu="true" data-kt-menu-expand="false">
+    <!-- Birds Eye -->
+    <div class="menu-item">
+      <a class="menu-link without-sub" routerLinkActive="active">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/birds_eye.svg" alt="">
+        </span>
+        <span class="menu-title">Birds Eye</span>
+      </a>
+    </div>
+
+    <!-- Tango Traffic -->
+    <div class="menu-item">
+      <a class="menu-link without-sub" routerLinkActive="active">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/tango_traffic.svg" alt="">
+        </span>
+        <span class="menu-title">Tango Traffic</span>
+      </a>
+    </div>
+
+    <!-- Tango Zone -->
+    <div class="menu-item">
+      <a class="menu-link without-sub" routerLinkActive="active">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/tango_zone.svg" alt="">
+        </span>
+        <span class="menu-title">Tango Zone</span>
+      </a>
+    </div>
+
+    <!-- Tango Revop -->
+    <div class="menu-item menu-accordion" data-kt-menu-trigger="click" routerLinkActive="here show">
+      <span class="menu-link">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/tango_revop.svg" alt="">
+        </span>
+        <span class="menu-title" data-link="/crafted/account">Tango Revop
+        </span>
+        <span class="menu-arrow"></span>
+      </span>
+      <div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Home
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Tagging
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Pending Action
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Customer Profile
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Control Center -->
+    <div class="menu-item menu-accordion" data-kt-menu-trigger="click" routerLinkActive="here show">
+      <span class="menu-link">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/control_center.svg" alt="">
+        </span>
+        <span class="menu-title" data-link="/crafted/account">Control Center
+        </span>
+        <span class="menu-arrow"></span>
+      </span>
+      <div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Live & Playback
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Screen Manager
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Store Explore
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tango SOP -->
+    <div class="menu-item menu-accordion" data-kt-menu-trigger="click" routerLinkActive="here show">
+      <span class="menu-link">
+        <span class="menu-icon">
+          <img class="fs-2" src="./assets/tango/sidemenu-icons/tango_sop.svg" alt="">
+        </span>
+        <span class="menu-title" data-link="/crafted/account">Tango SOP
+        </span>
+        <span class="menu-arrow"></span>
+      </span>
+      <div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Dashboard
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Create & Manage
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Flag
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Reports
+            </span>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="menu-link without-sub" routerLinkActive="active" routerLink="/crafted/account/settings">
+            <span class="menu-bullet">
+              <span class="bullet bullet-dot"></span>
+            </span>
+            <span class="menu-title">Incidents
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+        <!-- Manage -->
+        <div class="menu-item menu-accordion" data-kt-menu-trigger="click" routerLinkActive="here show">
+          <span class="menu-link">
+            <span style="width: 0px;" class="menu-icon">
+              <!-- <lib-keenicon name="profile-circle" class="fs-2"></lib-keenicon> -->
+            </span>
+            <span class="menu-title" data-link="/manage">Manage
+            </span>
+            <span class="menu-arrow"></span>
+          </span>
+          <div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg" >
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/brands">
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/brands.svg" alt="">
+                </span>
+                <span class="menu-title">Brands
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/overview">
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/overview.svg" alt="">
+                </span>
+                <span class="menu-title">Overview
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/stores">
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/stores.svg" alt="">
+                </span>
+                <span class="menu-title">Stores
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/users">
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/users.svg" alt="">
+                </span>
+                <span class="menu-title">Users
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/tickets" >
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/tickets.svg" alt="">
+                </span>
+                <span class="menu-title">Tickets
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/reports" >
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/reports.svg" alt="">
+                </span>
+                <span class="menu-title">Reports
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/audit" >
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/audit.svg" alt="">
+                </span>
+                <span class="menu-title">Audit
+                </span>
+              </a>
+            </div>
+            <div class="menu-item">
+              <a class="menu-link without-sub" routerLinkActive="active" routerLink="/manage/settings" >
+                <span class="menu-bullet">
+                  <img class="fs-2" src="./assets/tango/sidemenu-icons/settings.svg" alt="">
+                </span>
+                <span class="menu-title">Settings
+                </span>
+            </a>
+            </div>
+          </div>
+        </div>
+  </div>
+  <!--end::Menu-->
+</div>
+<!--end::Menu wrapper-->