@ng-zen/cli 22.6.0-next.1 → 22.7.0-next.1

package/README.md

@@ -171,6 +171,12 @@ ng generate @ng-zen/cli:ui --ui button input --stories
 | **Pin**     | Anchor-positioned overlay    | CSS Anchor Positioning, TemplateRef content, position and offset controls |
 | **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
 
+### Navigation
+
+| Component   | Description                 | Features                                                         |
+| ----------- | --------------------------- | ---------------------------------------------------------------- |
+| **Sidenav** | Responsive navigation shell | Collapsible rail, mobile bottom bar, header/content/footer slots |
+
 ## 🎨 Customization
 
 Every generated component utilizes CSS variables for immediate theming without touching the core logic. Overwrite them globally or locally:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.6.0-next.1",
+  "version": "22.7.0-next.1",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -63,6 +63,7 @@
     "pin",
     "popover",
     "radio",
+    "sidenav",
     "skeleton",
     "switch",
     "textarea"

package/schematics/ui/files/sidenav/content/sidenav-content.scss

@@ -0,0 +1,29 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zen-sidenav-gap);
+  min-block-size: 0;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--zen-sidenav-border) transparent;
+  container-type: inline-size;
+  container-name: sidenav-nav;
+
+  @media (width <= 48rem) {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0.25rem;
+    overflow: auto hidden;
+    scrollbar-width: none;
+    scroll-snap-type: x proximity;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/schematics/ui/files/sidenav/content/sidenav-content.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+/**
+ * Scrollable vertical navigation container.
+ * Usage: `<nav zenSidenavContent>...</nav>`
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[zenSidenavContent]',
+  template: '<ng-content />',
+  styleUrl: './sidenav-content.scss',
+})
+export class ZenSidenavContent {}

package/schematics/ui/files/sidenav/footer/sidenav-footer.scss

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  @media (width <= 48rem) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}

package/schematics/ui/files/sidenav/footer/sidenav-footer.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+/**
+ * Footer slot for the sidenav - contains secondary actions (settings, logout, profile).
+ * Usage: `<div zenSidenavFooter>...</div>`
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[zenSidenavFooter]',
+  template: '<ng-content />',
+  styleUrl: './sidenav-footer.scss',
+})
+export class ZenSidenavFooter {}

package/schematics/ui/files/sidenav/header/sidenav-header.scss

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-block-size: var(--zen-sidenav-item-height);
+  min-inline-size: 0;
+}

package/schematics/ui/files/sidenav/header/sidenav-header.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+/**
+ * Header slot for the sidenav - contains logo/brand and optional collapse toggle.
+ * Usage: `<div zenSidenavHeader>...</div>`
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[zenSidenavHeader]',
+  template: '<ng-content />',
+  styleUrl: './sidenav-header.scss',
+})
+export class ZenSidenavHeader {}

package/schematics/ui/files/sidenav/index.ts

@@ -0,0 +1,6 @@
+export { ZenSidenavContent } from './content/sidenav-content';
+export { ZenSidenavFooter } from './footer/sidenav-footer';
+export { ZenSidenavHeader } from './header/sidenav-header';
+export { ZenSidenavItem } from './item/sidenav-item';
+export { ZenSidenav } from './sidenav';
+export { ZenSidenavToggle } from './toggle/sidenav-toggle';

package/schematics/ui/files/sidenav/item/sidenav-item.html

@@ -0,0 +1,9 @@
+<a
+  routerLinkActive="active"
+  [attr.aria-label]="ariaLabel() || label()"
+  [attr.title]="ariaLabel() || label()"
+  [routerLink]="routerLink()"
+>
+  <zen-icon [icon]="icon()" [size]="size()" />
+  <span class="sidenav-label">{{ label() }}</span>
+</a>

package/schematics/ui/files/sidenav/item/sidenav-item.scss

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  min-inline-size: 0;
+
+  @media (width <= 48rem) {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+  }
+}
+
+a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: var(--zen-sidenav-item-radius);
+  text-decoration: none;
+  color: inherit;
+  white-space: nowrap;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+
+  &:hover {
+    background: color-mix(in oklch, var(--zen-sidenav-hover-background) 80%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--zen-sidenav-focus-color);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background: var(--zen-sidenav-active-background);
+    font-weight: 600;
+  }
+
+  @media (width <= 48rem) {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+    min-inline-size: 4rem;
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+    white-space: normal;
+    text-align: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.sidenav-label {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  transition:
+    opacity 150ms ease,
+    width 150ms ease,
+    margin 150ms ease;
+  overflow: hidden;
+
+  @media (width <= 48rem) {
+    font-size: 0.625rem;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-inline-size: 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+/* Desktop collapsed: hide label, show only icon with tooltip via title/aria-label */
+:host-context([data-collapsed='true']) .sidenav-label {
+  width: 0;
+  opacity: 0;
+  margin-inline: 0;
+  pointer-events: none;
+}

package/schematics/ui/files/sidenav/item/sidenav-item.ts

@@ -0,0 +1,40 @@
+import { Component, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+import { IconSvgObject, ZenIcon } from '../../icon';
+
+/**
+ * Individual navigation item with icon, label, active state, and responsive behavior.
+ *
+ * Desktop (expanded): Shows icon + label horizontally
+ * Desktop (collapsed): Shows icon only, label hidden with tooltip/aria-label
+ * Mobile: Shows icon stacked above label in column layout
+ *
+ * @example
+ * ```html
+ * <zen-sidenav-item [icon]="homeIcon" label="Home" routerLink="/home" />
+ * ```
+ */
+@Component({
+  selector: 'zen-sidenav-item',
+  templateUrl: './sidenav-item.html',
+  styleUrl: './sidenav-item.scss',
+  imports: [RouterLink, RouterLinkActive, ZenIcon],
+  host: {
+    '[attr.data-active]': 'isActive()',
+  },
+})
+export class ZenSidenavItem {
+  /** SVG icon definition object (from `@hugeicons/core-free-icons`). */
+  readonly icon = input.required<IconSvgObject>();
+  /** Visible label text. Hidden when the sidenav is collapsed or on mobile overflow. */
+  readonly label = input.required<string>();
+  /** Router path the item navigates to. */
+  readonly routerLink = input.required<string>();
+  /** Accessible label and tooltip. Falls back to `label` when omitted. */
+  readonly ariaLabel = input<string>();
+  /** Manual active state (in addition to `routerLinkActive`). */
+  readonly isActive = input(false);
+  /** Icon size in pixels. */
+  readonly size = input<number>(24);
+}

package/schematics/ui/files/sidenav/sidenav.html

@@ -0,0 +1,15 @@
+<aside class="sidenav-container">
+  <header class="sidenav-header">
+    <ng-content select="[zenSidenavHeader]" />
+  </header>
+
+  <div class="sidenav-content">
+    <ng-content select="[zenSidenavContent]" />
+  </div>
+
+  <footer class="sidenav-footer">
+    <ng-content select="[zenSidenavFooter]" />
+  </footer>
+</aside>
+
+<ng-content select="zen-sidenav-toggle" />

package/schematics/ui/files/sidenav/sidenav.scss

@@ -0,0 +1,110 @@
+:host {
+  --zen-sidenav-width: 15rem;
+  --zen-sidenav-collapsed-width: 4.5rem;
+  --zen-sidenav-padding-inline: 0.875rem;
+  --zen-sidenav-padding-block: 1rem;
+  --zen-sidenav-item-height: 2.5rem;
+  --zen-sidenav-item-radius: 0.5rem;
+  --zen-sidenav-gap: 0.5rem;
+  --zen-sidenav-background: #fafafa;
+  --zen-sidenav-border: #e0e0e0;
+  --zen-sidenav-hover-background: #eee;
+  --zen-sidenav-active-background: #e0e0e0;
+  --zen-sidenav-focus-color: #2563eb;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: block;
+  inline-size: var(--zen-sidenav-width);
+  block-size: 100dvh;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  transition: inline-size 180ms ease;
+  z-index: 1000;
+  position: relative;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  // In-flow bottom bar: part of the layout, never above content
+  @media (width <= 48rem) {
+    inline-size: 100%;
+    block-size: auto;
+  }
+}
+
+.sidenav-container {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  box-sizing: border-box;
+  padding-block: var(--zen-sidenav-padding-block);
+  padding-inline: var(--zen-sidenav-padding-inline);
+  overflow: hidden;
+  background: var(--zen-sidenav-background);
+  border-inline-end: 1px solid var(--zen-sidenav-border);
+
+  @media (width <= 48rem) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'content footer';
+    align-items: stretch;
+    block-size: auto;
+    padding-block: 0.25rem max(0.25rem, env(safe-area-inset-bottom));
+    padding-inline: 0.25rem;
+    border-block-start: 1px solid var(--zen-sidenav-border);
+    border-inline-end: 0;
+    overflow: hidden;
+  }
+}
+
+:host([data-collapsed='true']) {
+  inline-size: var(--zen-sidenav-collapsed-width);
+
+  .sidenav-header {
+    justify-content: center;
+  }
+}
+
+.sidenav-header {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--zen-sidenav-item-height);
+  margin-block-end: var(--zen-sidenav-gap);
+  overflow: hidden;
+
+  @media (width <= 48rem) {
+    display: none;
+  }
+}
+
+.sidenav-content {
+  min-block-size: 0;
+  overflow: hidden;
+
+  @media (width <= 48rem) {
+    grid-area: content;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+}
+
+.sidenav-footer {
+  margin-block-start: auto;
+  padding-block-start: 0.75rem;
+  overflow: hidden;
+
+  @media (width <= 48rem) {
+    grid-area: footer;
+    margin-block-start: 0;
+    padding-block-start: 0;
+    padding-inline-start: 0.25rem;
+    border-inline-start: 1px solid var(--zen-sidenav-border);
+    display: flex;
+    align-items: stretch;
+    min-inline-size: 4rem;
+  }
+}

package/schematics/ui/files/sidenav/sidenav.spec.ts

@@ -0,0 +1,101 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { HomeIcon } from '@hugeicons/core-free-icons';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ZenSidenavContent } from './content/sidenav-content';
+import { ZenSidenavFooter } from './footer/sidenav-footer';
+import { ZenSidenavHeader } from './header/sidenav-header';
+import { ZenSidenavItem } from './item/sidenav-item';
+import { ZenSidenav } from './sidenav';
+import { ZenSidenavToggle } from './toggle/sidenav-toggle';
+
+@Component({
+  template: `
+    <zen-sidenav [collapsed]="collapsed()">
+      <div zenSidenavHeader>Brand</div>
+      <nav zenSidenavContent>
+        <zen-sidenav-item label="Home" routerLink="/home" [icon]="icon" />
+      </nav>
+      <div zenSidenavFooter>Footer</div>
+      <zen-sidenav-toggle [collapsed]="collapsed()" (collapsedChange)="toggle()" />
+    </zen-sidenav>
+  `,
+  standalone: true,
+  imports: [ZenSidenav, ZenSidenavHeader, ZenSidenavContent, ZenSidenavFooter, ZenSidenavItem, ZenSidenavToggle],
+})
+class SidenavTestComponent {
+  readonly collapsed = signal(false);
+  readonly icon = HomeIcon;
+  readonly toggle = vi.fn(() => this.collapsed.update(v => !v));
+}
+
+describe('ZenSidenav', () => {
+  async function setup(): Promise<ComponentFixture<SidenavTestComponent>> {
+    await TestBed.configureTestingModule({
+      imports: [SidenavTestComponent],
+      providers: [provideZonelessChangeDetection(), provideRouter([])],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(SidenavTestComponent);
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  it('should create with header, content, footer and toggle slots', async () => {
+    const fixture = await setup();
+    expect(fixture.nativeElement.querySelector('zen-sidenav')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[zenSidenavHeader]')?.textContent).toBe('Brand');
+    expect(fixture.nativeElement.querySelector('[zenSidenavFooter]')?.textContent).toBe('Footer');
+    expect(fixture.nativeElement.querySelector('zen-sidenav-toggle')).toBeTruthy();
+  });
+
+  it('should reflect collapsed state on data-collapsed', async () => {
+    const fixture = await setup();
+    const host = fixture.nativeElement.querySelector('zen-sidenav');
+
+    expect(host.getAttribute('data-collapsed')).toBe('false');
+
+    fixture.componentInstance.collapsed.set(true);
+    fixture.detectChanges();
+
+    expect(host.getAttribute('data-collapsed')).toBe('true');
+  });
+
+  it('should render item label, icon link and aria fallback', async () => {
+    const fixture = await setup();
+    const link = fixture.nativeElement.querySelector('zen-sidenav-item a');
+
+    expect(link.textContent).toContain('Home');
+    expect(link.getAttribute('aria-label')).toBe('Home');
+    expect(link.getAttribute('title')).toBe('Home');
+    expect(link.getAttribute('href')).toBe('/home');
+    expect(fixture.nativeElement.querySelector('zen-sidenav-item zen-icon')).toBeTruthy();
+  });
+
+  it('should emit collapsedChange when toggle is clicked', async () => {
+    const fixture = await setup();
+    const toggle = fixture.debugElement.query(By.directive(ZenSidenavToggle));
+
+    toggle.query(By.css('button')).nativeElement.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.toggle).toHaveBeenCalled();
+    expect(fixture.componentInstance.collapsed()).toBe(true);
+  });
+
+  it('should swap toggle label and icon with collapsed state', async () => {
+    const fixture = await setup();
+    const button = (): HTMLButtonElement => fixture.nativeElement.querySelector('zen-sidenav-toggle button');
+
+    expect(button().getAttribute('aria-label')).toBe('Collapse sidenav');
+    expect(button().getAttribute('aria-expanded')).toBe('true');
+
+    fixture.componentInstance.collapsed.set(true);
+    fixture.detectChanges();
+
+    expect(button().getAttribute('aria-label')).toBe('Expand sidenav');
+    expect(button().getAttribute('aria-expanded')).toBe('false');
+  });
+});

package/schematics/ui/files/sidenav/sidenav.stories.ts

@@ -0,0 +1,110 @@
+import { signal } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { HomeIcon, Logout01Icon, Setting06Icon } from '@hugeicons/core-free-icons';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenIcon } from '../icon';
+import { ZenSidenavContent } from './content/sidenav-content';
+import { ZenSidenavFooter } from './footer/sidenav-footer';
+import { ZenSidenavHeader } from './header/sidenav-header';
+import { ZenSidenavItem } from './item/sidenav-item';
+import { ZenSidenav } from './sidenav';
+import { ZenSidenavToggle } from './toggle/sidenav-toggle';
+
+type Story = StoryObj<ZenSidenav>;
+
+const meta = {
+  title: 'UI/Sidenav',
+  component: ZenSidenav,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    applicationConfig({ providers: [provideRouter([])] }),
+    moduleMetadata({
+      imports: [
+        ZenButton,
+        ZenIcon,
+        ZenSidenav,
+        ZenSidenavContent,
+        ZenSidenavFooter,
+        ZenSidenavHeader,
+        ZenSidenavItem,
+        ZenSidenavToggle,
+      ],
+    }),
+  ],
+  argTypes: {
+    collapsed: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'false' } } },
+  },
+  args: {
+    collapsed: false,
+  },
+} satisfies Meta<ZenSidenav>;
+
+export default meta;
+
+const navTemplate = `
+  <zen-sidenav [collapsed]="collapsed()">
+    <div zenSidenavHeader>
+      <span style="font-weight: 700;">Zen</span>
+    </div>
+    <nav aria-label="Main navigation" zenSidenavContent>
+      <zen-sidenav-item [icon]="homeIcon" label="Home" routerLink="/home" />
+      <zen-sidenav-item [icon]="settingsIcon" label="Settings" routerLink="/settings" />
+    </nav>
+    <div zenSidenavFooter>
+      <button type="button" variant="ghost" zen-button>
+        <zen-icon [icon]="logoutIcon" [size]="22" />
+        @if (!collapsed()) {
+          <span class="sidenav-label">Logout</span>
+        }
+      </button>
+    </div>
+    <zen-sidenav-toggle [collapsed]="collapsed()" (collapsedChange)="collapsed.set(!collapsed())" />
+  </zen-sidenav>
+`;
+
+function navProps(collapsed: boolean): object {
+  return {
+    collapsed: signal(collapsed),
+    homeIcon: HomeIcon,
+    settingsIcon: Setting06Icon,
+    logoutIcon: Logout01Icon,
+  };
+}
+
+export const Default: Story = {
+  render: () => ({
+    props: navProps(false),
+    template: navTemplate,
+  }),
+};
+
+export const Collapsed: Story = {
+  render: () => ({
+    props: navProps(true),
+    template: navTemplate,
+  }),
+};
+
+export const Mobile: Story = {
+  tags: ['!autodocs'],
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: () => ({
+    props: navProps(false),
+    template: `
+      <div style="display: flex; flex-direction: column; min-height: 100dvh;">
+        <main style="flex: 1; padding: 1rem;">
+          <h1 style="font-size: 1.25rem;">Page content</h1>
+          <p>The sidenav below is an in-flow bottom bar — part of the layout, never covering content.</p>
+        </main>
+        ${navTemplate}
+      </div>
+    `,
+  }),
+};

package/schematics/ui/files/sidenav/sidenav.ts

@@ -0,0 +1,99 @@
+import { Component, input } from '@angular/core';
+
+/**
+ * ZenSidenav is a presentational responsive navigation shell. No business logic —
+ * nav items, auth and i18n live in the consumer.
+ *
+ * Slots:
+ * - `[zenSidenavHeader]`  — brand + optional collapse toggle
+ * - `[zenSidenavContent]` — nav items (scrollable)
+ * - `[zenSidenavFooter]`  — secondary actions (logout, profile)
+ * - `zen-sidenav-toggle`  — floating desktop collapse toggle (direct
+ *   child, straddles the inline-end border, hidden on mobile)
+ *
+ * Layout:
+ * ```
+ * Desktop, expanded (15rem rail):
+ * ┌────────────┬─────────────────┐
+ * │ Brand      ○                 │
+ * ├────────────┤                 │
+ * │ ⌂ Home     │  page content   │
+ * │ ⚙ Settings │                 │
+ * ├────────────┤                 │
+ * │ ⎋ Logout   │                 │
+ * └────────────┴─────────────────┘
+ *
+ * Desktop, collapsed (4.5rem icon rail, labels hidden):
+ * ┌────┬──────────────────────────┐
+ * │ B  ○                          │
+ * ├────┤                          │
+ * │ ⌂  │      page content        │
+ * │ ⚙  │                          │
+ * ├────┤                          │
+ * │ ⎋  │                          │
+ * └────┴──────────────────────────┘
+ *
+ * Mobile (<= 48rem, in-flow bottom bar, header hidden):
+ * ┌───────────────────────────┐
+ * │       page content        │
+ * │                           │
+ * ├───────────────────────────┤
+ * │ ⌂ Home │ ⚙ Settin… │ ⎋    │
+ * └───────────────────────────┘
+ * ```
+ *
+ * Desktop: 15rem rail, 4.5rem icon-only when `collapsed` (labels hide,
+ * `title`/`aria-label` keep tooltips). Mobile (<= 48rem): in-flow bottom
+ * bar — horizontal scroll nav + pinned footer, header hidden. The bar is
+ * part of the layout, never fixed, so it cannot cover content.
+ *
+ * @example
+ * ```html
+ * <zen-sidenav [collapsed]="collapsed()">
+ *   <div zenSidenavHeader>…</div>
+ *   <nav zenSidenavContent>…</nav>
+ *   <div zenSidenavFooter>…</div>
+ * </zen-sidenav>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-sidenav-width: 15rem;
+ *   --zen-sidenav-collapsed-width: 4.5rem;
+ *   --zen-sidenav-padding-inline: 0.875rem;
+ *   --zen-sidenav-padding-block: 1rem;
+ *   --zen-sidenav-item-height: 2.5rem;
+ *   --zen-sidenav-item-radius: 0.5rem;
+ *   --zen-sidenav-gap: 0.5rem;
+ *   --zen-sidenav-background: #fafafa;
+ *   --zen-sidenav-border: #e0e0e0;
+ *   --zen-sidenav-hover-background: #eee;
+ *   --zen-sidenav-active-background: #e0e0e0;
+ *   --zen-sidenav-focus-color: #2563eb;
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-sidenav',
+  templateUrl: './sidenav.html',
+  styleUrl: './sidenav.scss',
+  host: {
+    '[attr.data-collapsed]': 'collapsed()',
+  },
+})
+export class ZenSidenav {
+  /**
+   * Whether the desktop sidenav is collapsed.
+   *
+   * The component does not manage this state itself.
+   * The parent owns the state and may provide its own toggle control.
+   */
+  readonly collapsed = input(false);
+}

package/schematics/ui/files/sidenav/toggle/sidenav-toggle.scss

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  // Floating edge affordance against the nearest positioned ancestor (zen-sidenav host)
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: -0.75rem;
+  z-index: 1;
+
+  @media (width <= 48rem) {
+    display: none;
+  }
+}
+
+:host button {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-inline-size: 1.5rem;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--zen-sidenav-background);
+  border: 1px solid var(--zen-sidenav-border);
+}

package/schematics/ui/files/sidenav/toggle/sidenav-toggle.ts

@@ -0,0 +1,52 @@
+import { Component, input, output } from '@angular/core';
+import { PanelLeftCloseIcon, PanelLeftOpenIcon } from '@hugeicons/core-free-icons';
+
+import { ZenButton } from '../../button';
+import { IconSvgObject, ZenIcon } from '../../icon';
+
+/**
+ * Accessible toggle button for collapsing/expanding the sidenav.
+ *
+ * Project as a direct child of `zen-sidenav` — it positions itself
+ * straddling the inline-end border and hides itself on mobile.
+ *
+ * @example
+ * ```html
+ * <zen-sidenav [collapsed]="collapsed()">
+ *   <zen-sidenav-toggle [collapsed]="collapsed()" (collapsedChange)="collapsed.set(!collapsed())" />
+ * </zen-sidenav>
+ * ```
+ */
+@Component({
+  selector: 'zen-sidenav-toggle',
+  template: `
+    <button
+      size="sm"
+      type="button"
+      variant="ghost"
+      zen-button
+      [attr.aria-expanded]="!collapsed()"
+      [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
+      (click)="collapsedChange.emit()"
+    >
+      <zen-icon [icon]="collapsed() ? expandIcon() : collapseIcon()" [size]="20" />
+    </button>
+  `,
+  styleUrl: './sidenav-toggle.scss',
+  imports: [ZenIcon, ZenButton],
+})
+export class ZenSidenavToggle {
+  /** Current collapsed state of the parent sidenav. Decides icon and label. */
+  readonly collapsed = input.required<boolean>();
+  /** Emitted when the toggle is clicked. The parent owns the state. */
+  readonly collapsedChange = output<void>();
+
+  /** Icon shown when expanded (clicking collapses). */
+  readonly collapseIcon = input<IconSvgObject>(PanelLeftOpenIcon);
+  /** Icon shown when collapsed (clicking expands). */
+  readonly expandIcon = input<IconSvgObject>(PanelLeftCloseIcon);
+  /** Accessible label of the collapse action. */
+  readonly collapseLabel = input('Collapse sidenav');
+  /** Accessible label of the expand action. */
+  readonly expandLabel = input('Expand sidenav');
+}

package/schematics/ui/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'pin'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'pin'\n  | 'popover'\n  | 'radio'\n  | 'sidenav'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}

package/schematics/ui/schema.json

@@ -51,6 +51,7 @@
           "pin",
           "popover",
           "radio",
+          "sidenav",
           "skeleton",
           "switch",
           "textarea"

package/schematics/ui/schema.ts

@@ -23,6 +23,7 @@ export type UiType =
   | 'pin'
   | 'popover'
   | 'radio'
+  | 'sidenav'
   | 'skeleton'
   | 'switch'
   | 'textarea';