shelving/ui/layout/SidebarLayout.d.ts

Toolkit for using data in JavaScript.

import { type ReactElement, type ReactNode } from "react";
import type { OptionalChildProps } from "../util/props.js";
export interface SidebarLayoutProps extends OptionalChildProps {
    /** Content rendered in the fixed-width side column. */
    sidebar: ReactNode;
    /** Render the sidebar on the right rather than the left. */
    right?: boolean | undefined;
}
/**
 * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
 * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
 * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by a single menu button that switches between a burger and a close icon.
 * - While the drawer is open an overlay dims the rest of the page; clicking the overlay closes the drawer.
 * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
 * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
 */
export declare function SidebarLayout({ sidebar, children, right }: SidebarLayoutProps): ReactElement;