Navigation Components

Egret's navigation system includes several components:

• Vertical Navigation: Sidebar navigation for desktop and tablet views
• Horizontal Navigation: Top navbar navigation for desktop views
• Mobile Navigation: Responsive navigation for mobile devices
• Icon Navigation: Compact icon-only navigation option

Navigation Types

Egret supports three types of navigation menus that can be switched at runtime:

• Icon Menu: Default menu with icons and text
• Separator Menu: Menu with section separators
• Plain Menu: Basic menu without special formatting

The navigation service maintains separate arrays for each menu type and publishes the active menu through an Observable:

// In NavigationService
iconMenu: IMenuItem[] = [ ... ];      // Default menu items
separatorMenu: IMenuItem[] = [ ... ]; // Menu with separators
plainMenu: IMenuItem[] = [ ... ];     // Plain menu items

// Observable that components subscribe to
menuItems = new BehaviorSubject(this.iconMenu);
menuItems$ = this.menuItems.asObservable();

Defining Navigation Items

Here's an example of how to define navigation items:

// Example of defining navigation items
iconMenu: IMenuItem[] = [
  {
    name: 'DASHBOARD',
    type: 'dropDown',
    icon: 'dashboard',
    sub: [
      { name: 'Analytics', state: 'dashboard/analytics' },
      { name: 'Learning Management', state: 'dashboard/learning-management' }
    ]
  },
  {
    name: 'INBOX',
    type: 'link',
    icon: 'inbox',
    state: 'inbox',
    badges: [{ color: 'primary', value: '4' }]
  },
  {
    type: 'separator',
    name: 'Custom Components'
  },
  {
    name: 'CALENDAR',
    type: 'link',
    icon: 'date_range',
    state: 'calendar'
  },
  {
    name: 'External Link',
    type: 'extLink',
    icon: 'launch',
    state: 'https://example.com'
  }
];

Navigation Item Types

Egret supports several types of navigation items:

• link: A simple link that navigates to a route
• dropDown: A dropdown menu that contains sub-items
• icon: An icon-only item (used in the icon menu)
• separator: A section separator with a title
• extLink: An external link that opens in a new tab

Adding Badges

You can add badges to navigation items to show notifications or status indicators:

{
  name: 'INBOX',
  type: 'link',
  icon: 'inbox',
  state: 'inbox',
  badges: [
    { color: 'primary', value: '4' }
  ]
}

Badges can use Material theme colors (primary, accent, warn) or custom hex color codes.

Multi-level Navigation

Egret supports multi-level navigation with nested dropdowns. Here's an example of a three-level deep menu:

{
  name: 'Material Kits',
  type: 'dropDown',
  icon: 'favorite',
  sub: [
    {
      name: 'Form controls',
      type: 'dropDown',
      sub: [
        { name: 'Autocomplete', state: 'material/autocomplete' },
        { name: 'Checkbox', state: 'material/checkbox' }
      ]
    }
  ]
}

The navigation components automatically handle rendering of nested levels with proper indentation and animations.

Sidenav Component

The SidenavComponent renders vertical navigation in the sidebar. It subscribes to the navigation service and automatically updates when the navigation items change.

// In a layout component
import { NavigationService } from 'app/shared/services/navigation.service';

@Component({...})
export class VerticalLayoutComponent {
  constructor(
    private navService: NavigationService
  ) {}
}

The sidenav template uses recursive rendering to handle multi-level navigation:

<ng-template #menuTemplate let-menuItems="menuItems">
  <ul appDropdown class="sidenav">
    <li *ngFor="let item of menuItems" appDropdownLink>
      <!-- Item rendering logic -->
      
      <!-- Recursive call for sub-items -->
      <div *ngIf="item.type === 'dropDown'">
        <ng-container *ngTemplateOutlet="menuTemplate; context: {menuItems: item.sub}"></ng-container>
      </div>
    </li>
  </ul>
</ng-template>

Header Top Component

The HeaderTopComponent renders horizontal navigation in the top navbar. It also subscribes to the navigation service but limits the number of top-level items and moves excess items to a "More" dropdown.

// In HeaderTopComponent
menuItemSub: Subscription;

ngOnInit() {
  this.menuItemSub = this.navService.menuItems$
  .subscribe(res => {
    res = res.filter(item => item.type !== 'icon' && item.type !== 'separator');
    let limit = 4
    let mainItems:any[] = res.slice(0, limit)
    if(res.length <= limit) {
      return this.menuItems = mainItems
    }
    let subItems:any[] = res.slice(limit, res.length - 1)
    mainItems.push({
      name: 'More',
      type: 'dropDown',
      tooltip: 'More',
      icon: 'more_horiz',
      sub: subItems
    })
    this.menuItems = mainItems
  })
}

Changing Navigation Type

Here's how to switch between different navigation types:

// Switch to separator menu
navigationService.publishNavigationChange('separator-menu');

// Switch to icon menu
navigationService.publishNavigationChange('icon-menu');

// Switch to plain menu
navigationService.publishNavigationChange('plain-menu');

This is useful for providing different navigation experiences based on user preferences or application context.

Adaptive Navigation

The navigation components adjust based on screen size:

• On desktop, both vertical (sidebar) and horizontal (top navbar) navigation can be displayed
• On tablets, the sidebar can be collapsed to show only icons
• On mobile devices, the sidebar is hidden by default and can be toggled with a menu button

The responsive behavior is controlled by the LayoutService which works in conjunction with the navigation components.

Navigation Guidelines

• Keep the navigation structure simple and intuitive
• Limit the number of top-level items to improve usability
• Use consistent icons and naming conventions
• Group related items under logical categories
• Use separators to organize large navigation menus
• Avoid deep nesting (more than 3 levels) as it can confuse users