Component

Sidebar

Side panel whose open/closed state lives in the URL (?menu=open). Overlay mode on mobile, persistent on desktop ≥400px. State is shareable and synced via NeuUrlStateService.

import { NeuSidebarComponent } from '@neural-ui/core/sidebar';

import { NeuSidebarComponent } from '@neural-ui/core/sidebar';
import { NeuUrlStateService } from '@neural-ui/core/url-state';

@Component({
  imports: [NeuSidebarComponent, NeuButtonComponent],
  template: `
    <!-- El sidebar gestiona su propio estado desde ?menu=open / Sidebar manages its own state from ?menu=open -->
    <neu-sidebar
      urlParam="menu"
      [persistent]="isDesktop()"
      [closeOnEscape]="true"
      [restoreFocus]="true"
    >
      <span neu-sidebar-header>Mi App</span>
      <nav><!-- links de navegación / navigation links --></nav>
      <div neu-sidebar-footer>v1.0</div>
    </neu-sidebar>

    <!-- Abrir desde cualquier botón / Open from any button -->
    <button neu-button (click)="open()">Abrir menú</button>
  `
})
export class AppComponent {
  private readonly urlState = inject(NeuUrlStateService);
  isDesktop = computed(() => window.innerWidth >= 400);

  open() {
    this.urlState.setParam('menu', 'open', false);
  }
}`