qbit kit ng: QSidemenu

QSidemenu

Module that renders a sidenav menu, based on some config, and exposes a service that can manage the sidemenu.

Usage

Importing:

import { QSidemenuModule } from '@qbitartifacts/qbit-kit-ng';

Add the module

app.module.ts

{
  imports: [QSidemenuModule]
}

Add the component

app.component.html

<qbit-sidemenu></qbit-sidemenu>

Define the items

Now create the list of items that the menu should render, there are various types of items, see examples

export const SIDEMENU_ITEMS: QSidemenuItem[] = [
  {
    name: 'dashboard',
    icon: 'dashboard',
    label: 'DASHBOARD',
    route: '/dashboard',
    permission: PermissionUser,
  },
]

Provide items, so sidemenu can find them

app.module.ts

providers: [
    {
      provide: QBIT_SIDEMENU_ITEMS,
      useValue: SIDEMENU_ITEMS,
    },
]

Using the service

Toggling menu

With the service we can open/close and toggle sidemenu:

constructor(public sidemenu: QSidemenuService) {
    this.sidemenu.open();
    this.sidemenu.closed();
    this.sidemenu.toggle();
}

Items Examples

Interface

export interface QSidemenuItem {
  name: string;
  icon?: string;
  label: string;
  route?: string;
  separator?: boolean;
  action?: (...args: any[]) => any;
  permission?: InternalPermission;
  isExternal?: boolean;
  keyValue?: boolean;
  value?: any;
  badge?: string;
}

Item with Route

{
    name: 'dashboard',
    icon: 'dashboard',
    label: 'DASHBOARD',
    route: '/dashboard',
    permission: PermissionUser,
}

Separator

{
    name: 'admin_separator',
    separator: true,
    label: 'ADMIN',
    permission: PermissionAdmin,
}

Custom Key-Value

{
    name: 'panel_version',
    keyValue: true,
    label: 'PANEL',
    value: environment.version,
    permission: PermissionUser,
}