npm install @wamlib/ngx-menu-manager

Initialization

const appName = 'My App';

const menuItems: NgxMenuItem[] = [
  {
    label: 'Welcome',
    route: 'welcome',
    iconName: 'emoji_people',
    accessLevel: 0,
    type: NGX_MENU_ITEM_TYPE_ENUM.NAVIGATION,
    isShownWhen: NGX_MENU_ITEM_VISIBILITY_ENUM_CONDITIONS.NOT_AUTHENTICATED
  },
  {
    label: 'Register',
    route: 'register',
    iconName: 'person_add',
    accessLevel: 0,
    type: NGX_MENU_ITEM_TYPE_ENUM.NAVIGATION,
    isShownWhen: NGX_MENU_ITEM_VISIBILITY_ENUM_CONDITIONS.NOT_AUTHENTICATED
  },
  {
    label: 'Sign In',
    route: 'sign-in',
    iconName: 'login',
    accessLevel: 0,
    type: NGX_MENU_ITEM_TYPE_ENUM.NAVIGATION,
    isShownWhen: NGX_MENU_ITEM_VISIBILITY_ENUM_CONDITIONS.NOT_AUTHENTICATED
  },
  {
    label: 'Home',
    route: 'home',
    iconName: 'home',
    accessLevel: 1,
    type: NGX_MENU_ITEM_TYPE_ENUM.NAVIGATION,
    isAuthenticationRequired: true,
    isShownWhen: NGX_MENU_ITEM_VISIBILITY_ENUM_CONDITIONS.AUTHENTICATED
  }
];

export const appConfig: ApplicationConfig = {
 providers: [
   provideMenuManager({
     appName,
     menuItems
   })
 ]
};

Initialization (With optional configuration)

const appName = 'Custom App';

export const appConfig: ApplicationConfig = {
 providers: [
   provideMenuManager({
     appName,
     isMenuGuardEnabled: false,
     unauthenticatedRedirectRoute: 'login'
   })
 ]
};

Usage

import { NgxMenuManager } from '@wamlib/ngx-menu-manager';

@Component({...})
export class AppComponent {
  protected menuManager = inject(NgxMenuManager);
}

@if (menuManager.currentIsAuthenticated()) {
  <app-sidebar [menuItems]="menuManager.filteredMenuList()" />
} @else {
  <app-login-prompt />
}

Menu Guard Usage

import {Routes} from '@angular/router';
import {ngxMenuGuard} from '@wamlib/ngx-menu-manager';

export const routes: Routes = [
  {
    path: '',
    component: Viewport,
    children: [
      {
        path: 'home',
        component: Home,
        canActivate: [ngxMenuGuard],
        data: { pageName: 'Home' },
      },
      {
        path: 'sign-in',
        component: SignIn,
        data: { pageName: 'Sign In' },
      },
      // ... other routes
    ],
  },
];