@papernote/ui/dist/components/Sidebar.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
export interface SidebarItem {
    id: string;
    label: string;
    icon?: React.ReactNode;
    href?: string;
    children?: SidebarItem[];
    onClick?: () => void;
    active?: boolean;
    badge?: string | number;
    separator?: boolean;
    external?: boolean;
}
export interface SidebarProps {
    items: SidebarItem[];
    onNavigate?: (href: string, external?: boolean) => void;
    className?: string;
    header?: React.ReactNode;
    footer?: React.ReactNode;
    currentPath?: string;
    /** Whether sidebar is open on mobile (drawer mode) */
    mobileOpen?: boolean;
    /** Callback when mobile drawer should close */
    onMobileClose?: () => void;
    /** Width of the sidebar (default: 256px / w-64) */
    width?: string;
}
export interface SidebarGroupProps {
    title?: string;
    items: SidebarItem[];
    onNavigate?: (href: string, external?: boolean) => void;
    defaultExpanded?: boolean;
    currentPath?: string;
}
export declare function SidebarGroup({ title, items, onNavigate, defaultExpanded, currentPath }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
/**
 * Sidebar - Navigation sidebar with mobile drawer support
 *
 * On desktop: Renders as a fixed-width sidebar
 * On mobile: Renders as a drawer overlay when mobileOpen is true
 *
 * @example Desktop usage (no mobile props)
 * ```tsx
 * <Sidebar
 *   items={navItems}
 *   header={<Logo />}
 *   footer={<UserProfile />}
 *   currentPath={location.pathname}
 *   onNavigate={(href) => navigate(href)}
 * />
 * ```
 *
 * @example With mobile drawer support
 * ```tsx
 * const [mobileOpen, setMobileOpen] = useState(false);
 *
 * <Sidebar
 *   items={navItems}
 *   header={<Logo />}
 *   mobileOpen={mobileOpen}
 *   onMobileClose={() => setMobileOpen(false)}
 *   onNavigate={(href) => {
 *     navigate(href);
 *     setMobileOpen(false); // Close drawer on navigation
 *   }}
 * />
 * ```
 */
export default function Sidebar({ items, onNavigate, className, header, footer, currentPath, mobileOpen, onMobileClose, width, }: SidebarProps): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=Sidebar.d.ts.map