@tilde-nlp/ngx-menu

NgxMenu

Library for project menu. Contains collapsible side navigation and dropdown menu for small screens Component layout and stlying is based on angular flex-layout framework.

Including side nav in your app

Basic steps for including side nav in app:

1. Install necessary dependencies npm i @tilde-nlp/ngx-common @tilde-nlp/ngx-menu @tilde-nlp/ngx-strapi @tilde-nlp/strapi-models. Strapi libs are necessary for legacy use and in case project needs strapi menu items.

2. Provide MENU_SHARED_CONFIG amd STRAPI_API_CONFIG_TOKEN (even if you don't need one) in your app.config.ts file. Example:

{
      provide: MENU_SHARED_CONFIG, useValue: {
        disableStrapi: true,
        baseUrl: '/',
        itemGroups: [
          {
            items: [
            ]
          }
        ]
      }
    },
    {
      provide: STRAPI_API_CONFIG_TOKEN,
      useValue: { baseUrl: "", enabled: false }
    },

3. Define side nav settings in component where you want to add sidenav:

readonly settings: SideNavSettings = {
    menuLogo: 'images/logo.svg',
    menuLogoCollapsed: 'images/logo.svg',
    disableStrapi: true,
    expandedWidth: '241px',
    collapsedWidth: '56px',
    userOptions: [
      {
        label: 'menu.logout',
        callback: () => this.logout()
      }
    ]
  };

4. Add component to your html.

<lib-side-nav-menu
  [menuSettings]="settings"
>
</lib-side-nav-menu>