modus-angular-side-navigation-usage

Modus Navbar + Side Navigation Integration (Angular)

Critical patterns for integrating modus-navbar with modus-side-navigation in Angular applications.

Key Rules

• Use Angular wrapper components - Use modus-navbar and modus-side-navigation, not raw web components
• Pass props as native objects - Angular handles binding automatically
• Listen for mainMenuOpenChange events - Use DOM event listeners on container
• Position side navigation absolutely - Required for proper layering
• Set explicit z-index - Ensure side navigation renders above content

DO: Use Angular Wrapper Components

<!-- DO: Use Angular wrapper components -->
<modus-navbar [userCard]="userCardInfo()" [visibility]="{ mainMenu: true, user: true }" />

<modus-side-navigation
  [expanded]="false"
  [collapseOnClickOutside]="true"
  [maxWidth]="'256px'"
  mode="push"
  [targetContent]="'#panel-content'"
/>

DO: Setup Event Listeners in ngAfterViewInit

export class SideNavigationDemoComponent implements AfterViewInit {
  readonly navbarMenuExpanded = signal<boolean>(false);

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    this.setupNavbarSideNavigationIntegration();
  }

  private setupNavbarSideNavigationIntegration(): void {
    const container = this.elementRef.nativeElement.querySelector('.layout-with-navbar');

    container.addEventListener('mainMenuOpenChange', (event: any) => {
      const sideNav = container.querySelector('modus-wc-side-navigation');

      if (sideNav) {
        sideNav.expanded = event.detail;
        this.navbarMenuExpanded.set(event.detail);
      }
    });

    const sideNav = container.querySelector('modus-wc-side-navigation');
    sideNav?.addEventListener('expandedChange', (event: any) => {
      this.navbarMenuExpanded.set(event.detail);
    });
  }
}

DO: Position Side Navigation Absolutely with Z-Index

.layout-with-navbar {
  box-shadow: rgba(36, 35, 45, 0.3) 1px 0 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.layout-with-navbar .main-content-row {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

.layout-with-navbar .side-navigation,
.layout-with-navbar modus-side-navigation {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 999;
}

.layout-with-navbar .panel-content {
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
  margin-left: 4rem;
}