@ottili/foundation-shell

Topbar, sidebar, mobile nav, inspector and switchers (SoT §8.4, §15).

Install

npm install @ottili/foundation-shell

This package is part of the Ottili Foundation Framework. See docs/OTTILI_FOUNDATION_FRAMEWORK_SOURCE_OF_TRUTH.md for the canonical spec.

Public API

• AppShell lays out topbar, sidebar, main, inspector, and workbench regions.
• Topbar, Sidebar, CompanySwitcher, ProductSwitcher, QuickCreate, FavoritesList, and RecentsList.
• useSidebarCollapse for collapsible sidebar state.
• Switcher and badge helpers for company/product context.

Usage

import { AppShell, Topbar, Sidebar, Brand, useSidebarCollapse } from "@ottili/foundation-shell";

const { collapsed } = useSidebarCollapse();

<AppShell
  topbar={<Topbar brand={<Brand productName="HQ" />} />}
  sidebar={<Sidebar items={navItems} translate={t} collapsed={collapsed} />}
>
  <ProductPage />
</AppShell>