Sidebar

Name: ng-oat
Author: SashiKumar Yadav

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

Input / API	Type	Default	Description
`[scrollLock]`	`boolean`	`true`	Lock scroll on mobile when open
`[initialOpen]`	`boolean`	`false`	Start with sidebar open
`isOpen()`	`Signal<boolean>`	—	Current open state
`openChange`	`OutputEmitter<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/sidebar';

@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>

App Sidebar

A production-oriented navigation shell with tokenized dimensions, active state, collapse, mobile drawer behavior, and header/footer slots.

html

import { NgOatAppSidebar } from '@letsprogram/ng-oat/app-sidebar';

<ng-oat-app-sidebar #sidebar [sections]="sections" [(activeId)]="activeId">
  <strong sidebarHeader>Acme Console</strong>
  <span sidebarFooter>Signed in as Alex</span>
</ng-oat-app-sidebar>

<button (click)="sidebar.toggleMobile()">Open navigation</button>