Nav Container Component

There are your options :

The NavContainerComponent serves as a container for managing navigation in Angular applications. It provides support for responsive design, dynamic sidebar visibility, and theme-based logo switching, making it ideal for modern, scalable layouts.

How to use the component in your app :

1. import the component :

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

1. The selector for component , like it :

<lib-navbar>
</lib-navbar>

This is the output:

Features

Dynamic Navigation: Displays navigation items dynamically through the navigationItems input.

Responsive Design: Automatically adapts to screen sizes using Angular’s BreakpointObserver. Includes tablet-specific behavior.

Sidebar Visibility: Provides event-based control over the sidebar, including toggle and close actions, integrated with NgEventBus.

Logo Support: Supports light and dark mode logos with darkLogoPath and lightLogoPath.

Route Prefixing: Simplifies routing with a configurable routePrefix for all navigation items.

Inputs

Input	Type	Description
darkLogoPath	string (optional)	Path to the logo for dark themes.
lightLogoPath	string (optional)	Path to the logo for light themes.
expandedNavMenu	boolean	Controls whether the navigation menu is expanded or collapsed. Default: false.
showLogo	'large' | 'small' | 'always' (optional)	controls when and how the logo is displayed in the navigation container
navigationItems	NavigationItem[]	An array of menu items defining the navigation structure.
routePrefix	string	A prefix to prepend to all navigation routes. Useful for modular routing.

Properties

Property	Type	Description
sidebarVisible	boolean	Indicates whether the sidebar is currently visible. Controlled dynamically.
isTablet	boolean	A flag to indicate if the current screen size matches the tablet breakpoint (max-width: 1200px).

Methods

Constructor

The constructor initializes the component and sets up event subscriptions for toggling and closing the sidebar using NgEventBus.

ngOnInit()

• Description: Initializes the component’s responsive behavior by observing screen size changes with BreakpointObserver.

• Purpose: Ensures the component adapts to screen sizes dynamically, setting the isTablet property based on the current viewport.

Event Handling

1. Sidebar Toggle

   • Subscribes to SidebarEvent.toggle. Toggles the visibility of the sidebar when the event is triggered.

   • For non-tablet devices, it toggles the CSS class inactive on the navigation bar.

2. Sidebar Close

   • Subscribes to SidebarEvent.close. Hides the sidebar when the event is triggered.

For example:

Here’s an example of how to use the NavContainerComponent in your Angular application:

html

<lib-navbar
  [darkLogoPath]="'assets/logos/dark-logo.png'"
  [lightLogoPath]="'assets/logos/light-logo.png'"
  [expandedNavMenu]="true"
  [showLogo]="'always'"
  [navigationItems]="menuItems"
  [routePrefix]="'/admin'"
>
  <div slot="topContent">
    <!-- Top content such as user profile or branding -->
    <app-user-profile></app-user-profile>
  </div>

  <div slot="bodyContent">
    <!-- Main application content -->
    <router-outlet></router-outlet>
  </div>
</lib-navbar>

you have to create a new folder named assets and put the logos inside it

typescript

import { Component } from '@angular/core';
import { NavigationItem } from 'path-to-package';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  menuItems: NavigationItem[] = [
    {
      route: '/dashboard',
      title: 'Dashboard',
      visible: true,
      children: [
        { route: '/dashboard/overview', title: 'Overview', visible: true },
        { route: '/dashboard/settings', title: 'Settings', visible: true },
      ],
    },
    { route: '/profile', title: 'Profile', visible: true },
  ];
}

NavigationItem Interface

The NavigationItem interface represents the structure of a menu item in the navigation system. It defines the properties that can be used to configure each item in the menu, including routing, visibility, and any nested children.

Property	Type	Description

route	string	The route path associated with this navigation item. This defines the path the item will link to when clicked.

title	string	The title of the navigation item, typically displayed in the menu.

visible	boolean (optional)	Determines whether the navigation item is visible in the menu. If not provided, the item is assumed to be visible.

visibleFn	() => boolean (optional)	A function that determines the visibility of the navigation item dynamically based on some logic or conditions.

children	NavigationItem[] (optional)	An array of NavigationItem objects, representing nested navigation items (for creating submenus).

activeIndex	number (optional)	An index to track the active child item (if any). This can be used to highlight the active submenu.

For example :

const navigationItems: NavigationItem[] = [
  {
    route: '/admin',
    title: 'Admin',
    visible: true,
    children: [
      {
        route: '/admin/users',
        title: 'User Management',
        visible: true,
        children: [
          {
            route: '/admin/users/create',
            title: 'Create User',
            visible: true
          },
          {
            route: '/admin/users/list',
            title: 'User List',
            visible: true
          }
        ]
      },
      {
        route: '/admin/settings',
        title: 'Settings',
        visible: true,
        children: []
      }
    ]
  }
];