Sidebar

import { Component } from '@angular/core';
import { WrSidebar } from 'ngwr/sidebar';

@Component({ imports: [WrSidebar] })
export class MyComponent {}

protected readonly entries: WrSidebarEntry[] = [
  { title: 'Introduction', icon: 'book', url: ['/intro'] },
  {
    title: 'Components',
    count: 4,
    countLabel: '4 pages', // what a screen reader hears
    children: [
      {
        title: 'Graph',
        subtitle: 'Nodes and edges',
        badge: { text: 'New', tone: 'primary' }, // 'neutral' | 'primary' | 'danger'
        url: ['/components/graph'],
      },
      {
        title: 'Navigation',
        url: ['/components/navigation'], // also a page: the arrow opens it
        children: [{ title: 'Sidebar', url: ['/components/sidebar'] }],
      },
    ],
  },
];

protected readonly entries: WrSidebarEntry[] = [
  // Without exact, '/' matches every URL
  { title: 'Home', url: ['/'], activeOptions: { exact: true } },
  { title: 'Orders', url: ['/orders'] }, // stays active on /orders/42
];