Nav Menu Component

The NavigationMenuComponent is a flexible menu component designed to manage navigation items in Angular applications. It supports hierarchical menus, route-based active state highlighting, and optional logo display. The component integrates seamlessly with Angular's router and event-driven architecture.

How to use the component in your app :

1. import the component :

import { NavigationMenuComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-cms-navigation-menu>
</lib-cms-navigation-menu>

Features

• Dynamic Menu: Renders navigation items dynamically from the navigationItems input, supporting hierarchical menus with nested routes.

• Active Route Highlighting: Automatically highlights the active route based on the current URL.

• Logo Display: Optionally displays a logo using the showlogo input.

• Event-Driven Sidebar Management: Emits a SidebarEvent.close event when navigation occurs, allowing seamless integration with sidebars.

Inputs

Input	Type	Description
showlogo	boolean	Controls whether the logo is displayed in the navigation menu. Default: false.
expanded	boolean	Indicates whether the navigation menu is expanded or collapsed. Default: false.
routePrefix	string	A prefix added to all routes in the navigation menu.
navigationItems	NavigationItem[]	An array of navigation items defining the structure and hierarchy of the menu.

Methods

onNavigate()

• Description: Emits a SidebarEvent.close event to close the sidebar when a navigation item is clicked.

• Usage: Typically called when a menu item is clicked to trigger a sidebar close action.

isActiveRoute(router, item, prefix)

• Description: Checks if the current route matches the route of the provided navigation item or its children.

• Parameters:

  • router: The Angular router instance to get the current URL.

  • item: The navigation item to check.

  • prefix: The route prefix to prepend to the navigation item's route.

• Returns: true if the current route matches the item's route or one of its children's routes; otherwise false.

• Purpose: Useful for highlighting the active route in the menu.

For example :

html

<lib-cms-navigation-menu
  [showlogo]="true"
  [expanded]="true"
  [routePrefix]="'/admin'"
  [navigationItems]="menuItems">
</lib-cms-navigation-menu>

typescript

public navigationItems: NavigationItem[] = dashboardNestedRoutes.map((e) =>
    mapRouteToNavigationItem(e)