@stanfordspezi/spezi-web-design-system/dist/src/molecules/DashboardLayout/DashboardLayout.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ReactNode } from 'react';
import { DashboardContextValue } from './DashboardContext';
export interface DashboardLayoutProps extends Partial<DashboardContextValue> {
    /**
     * Title slot in the header. Can be used together with the {@link PageTitle} component.
     * @example
     * ```tsx
     *  <DashboardLayout title={<PageTitle icon={<Home />} title="Home" />} />
     * ```
     */
    title?: ReactNode;
    /**
     * Actions slot displayed in the header and mobile menu.
     */
    actions?: ReactNode;
    /**
     * Main content of the dashboard.
     */
    children?: ReactNode;
    /**
     * Slot for aside panel content.
     */
    aside?: ReactNode;
    /**
     * Slot for mobile menu content.
     */
    mobile?: ReactNode;
}
/**
 * A responsive dashboard skeleton component with a collapsible sidebar.
 *
 * Features:
 * - Responsive design with mobile menu
 * - Collapsible sidebar on large screens
 * - Fixed header with actions
 * - Mobile-optimized navigation
 *
 * @example
 * ```tsx
 * // Basic usage
 * <DashboardLayout
 *   title="Dashboard"
 *   aside={<Navigation />}
 *   mobile={<MobileNavigation />}
 *   actions={<UserMenu />}
 * >
 *   <DashboardContent />
 * </DashboardLayout>
 * ```
 */
export declare const DashboardLayout: ({ title, actions, children, aside, mobile, shrinkable, }: DashboardLayoutProps) => import("react").JSX.Element;