Sidebar

Component wrapper for Oat sidebar layout. Provides scroll lock on mobile, ESC close, outside-click close, and programmatic control.

Input / APITypeDefaultDescription
[scrollLock]booleantrueLock scroll on mobile when open
[initialOpen]booleanfalseStart with sidebar open
isOpen()Signal<boolean>—Current open state
openChangeOutputEmitter<boolean>—Fires when open state changes
open()method—Open the sidebar
close()method—Close the sidebar
toggle()method—Toggle the sidebar

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatSidebarComponent } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatSidebarComponent],
  template: `
    <ng-oat-sidebar #sb [initialOpen]="true" (openChange)="onToggle($event)">
      <aside data-sidebar>
        <header><strong>My App</strong></header>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
      </aside>
      <main>Content here</main>
    </ng-oat-sidebar>
  `,
})
export class ExampleComponent {
  onToggle(open: boolean) {
    console.log('Sidebar', open ? 'opened' : 'closed');
  }
}

Inline Demo

Main content area. Sidebar state: Closed

html
<ng-oat-sidebar #sb [initialOpen]="true" (openChange)="onToggle($event)">
  <aside data-sidebar>
    <header><strong>Sidebar</strong></header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </aside>
  <main>
    Main content here.
    <button (click)="sb.toggle()">Toggle</button>
  </main>
</ng-oat-sidebar>