alouette
Version:
A modern, customizable design system built on top of NativeWind v5 with configurable defaults
42 lines • 1.8 kB
TypeScript
import type { ReactNode } from "react";
declare const sidebarBreakpointWidths: {
readonly md: 768;
readonly lg: 1024;
readonly xl: 1280;
};
export type AppSidebarLayoutBreakpoint = keyof typeof sidebarBreakpointWidths;
export interface AppSidebarLayoutProps {
/**
* Left column from `sidebarBreakpoint` — typically an `AppSidebar`. Below it
* it is not rendered visibly: the `header` takes over.
*/
sidebar: ReactNode;
/**
* Top chrome below `sidebarBreakpoint` only — typically an `AppHeader`. It
* scrolls with the screen, as in an `AppShell`. What it holds depends on the
* navigation: a few destinations fit in a `NavBar` or an `HeaderNav`; a long
* one belongs behind a menu button opening a drawer.
*/
header?: ReactNode;
/**
* Width from which the sidebar shows (`md` 768px, `lg` 1024px, `xl`
* 1280px). Below it the `header` takes over. Defaults to `lg`, the narrowest
* width leaving the screen beside a 280px sidebar room for a layout of its
* own.
*/
sidebarBreakpoint?: AppSidebarLayoutBreakpoint;
/** The screen itself, in a `main` landmark. */
children?: ReactNode;
"aria-label"?: string;
className?: string;
}
/**
* Application layout: from `sidebarBreakpoint` a sidebar beside the screen,
* which sits in a raised panel and scrolls on its own; below it, a header
* scrolling with the screen as one page. The layout applies the safe-area
* insets around the body, so the screen inside needs no scroll container and
* no insets of its own.
*/
export declare function AppSidebarLayout({ sidebar, header, sidebarBreakpoint, children, className, "aria-label": ariaLabel, }: AppSidebarLayoutProps): ReactNode;
export {};
//# sourceMappingURL=AppSidebarLayout.d.ts.map