` and starts with a "Skip to content" link. ```tsx import { SidebarLayout } from "@/components/ouro/sidebar/sidebar-layout"; ``` ## Example ```tsx } header={} > ``` ## Usage The phone menu opens once JavaScript has loaded (after hydration); the links are in the server HTML from 640px up. Use `AuthLayout` for the sign-in pages. ## Use instead when - Use `StackedLayout` instead when the navigation is a `Navbar` across the top. ## Props Type: `SidebarLayoutProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `as` | `"div" \| "main"` | `"main"` | The element around the page. Pass `"div"` when the layout renders inside a page that already has a `

`, since a document has one. | | `bleed` | `boolean` | | Removes the padding around the page, for content that runs edge to edge (a map, a cover photo). | | `children` (required) | `ReactNode` | | The page. It renders inside the page's `

`. | | `className` | `string` | | Layout only: height and margins (`min-h-96`). Appearance classes warn in development. | | `header` | `ReactNode` | | A bar above the page: a search field, the page's actions. From 640px up it runs across the top of the page, beside the sidebar; below, it shares the top bar with the menu button. It renders in a `

`, the page's banner landmark. | | `ref` | `Ref` | | Reaches the rendered element. | | `sidebar` (required) | `ReactNode` | | The app's `Sidebar`. It sits beside the page from 640px up, and is a menu button in the top bar below. | | `skipLabel` | `string` | `"Skip to content"` | The text of the link that skips the sidebar, shown when it has keyboard focus. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `navbar`: Not a prop. The bar above the page is `header`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element.