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>}
      footer={<div>Footer</div>}
    >
      <div>Main content</div>
    </Layout>
  );
}

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;
}