nabs-ui-layout

Reusable layout control for the Nabs UI library.

Usage

import { Layout } from "nabs-ui-layout";

export function Example() {
  return (
    <Layout
      className="app-shell"
      header={<div>Header</div>}
      leftSidePanel={<div>Nav</div>}
      leftSidePanelWidth="18rem"
      rightSidePanelWidth="20rem"
      footer={<div>Footer</div>}
    >
      <div>Main content</div>
    </Layout>
  );
}

Side Panel Widths

• leftSidePanelWidth and rightSidePanelWidth accept CSS length values (for example "18rem", "280px") or numbers (treated as pixels).
• When omitted, side panels use content-driven width.
• You can still tune defaults through CSS variables:
  • --nabs-ui-layout-left-panel-width
  • --nabs-ui-layout-right-panel-width
  • --nabs-ui-layout-side-panel-max-width

Styling

Use CSS to tune the shell and the slot regions:

.app-shell {
  --nabs-ui-layout-left-panel-width: 18rem;
  --nabs-ui-layout-right-panel-width: 20rem;
  --nabs-ui-layout-gap: 1.25rem;
}

.app-shell .nabs-ui-layout__panel {
  background: #f8fafc;
}

.app-shell .nabs-ui-layout__content {
  background: #ffffff;
}