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

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

import React from 'react';
import { SidebarItem } from './Sidebar';
import { MobileHeaderProps } from './MobileHeader';
import { BottomNavItem } from './BottomNavigation';
export interface Section {
    /** Unique identifier for the section */
    id: string;
    /** Display label for the section in navigation */
    label: string;
}
export interface MobileLayoutProps {
    /** Main page content */
    children: React.ReactNode;
    /** Sidebar navigation items (required for both desktop sidebar and mobile drawer) */
    sidebarItems: SidebarItem[];
    /** Current active path for highlighting */
    currentPath?: string;
    /** Handler for navigation clicks */
    onNavigate?: (href: string) => void;
    /** Header component for sidebar (logo, branding, etc.) */
    header?: React.ReactNode;
    /** User profile button for sidebar footer */
    userProfile?: React.ReactNode;
    /** Additional sidebar content */
    sidebarFooter?: React.ReactNode;
    /** Title displayed in mobile header (required for mobile layout) */
    title: string;
    /** Subtitle displayed in mobile header */
    subtitle?: string;
    /** Right action for mobile header */
    headerRightAction?: React.ReactNode;
    /** Custom left action for mobile header (overrides menu button) */
    headerLeftAction?: React.ReactNode;
    /** Mobile header variant */
    headerVariant?: MobileHeaderProps['variant'];
    /** Bottom navigation items for mobile (if not provided, uses sidebarItems) */
    bottomNavItems?: BottomNavItem[];
    /** Active bottom nav item ID */
    activeBottomNavId?: string;
    /** Show labels on bottom nav */
    showBottomNavLabels?: boolean;
    /** Optional status bar component displayed at the bottom (desktop only) */
    statusBar?: React.ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Page sections for navigation dots in desktop gutter */
    sections?: Section[];
    /** Force mobile layout even on desktop */
    forceMobile?: boolean;
    /** Force desktop layout even on mobile */
    forceDesktop?: boolean;
    /** Hide bottom navigation on mobile */
    hideBottomNav?: boolean;
    /** Hide mobile header */
    hideMobileHeader?: boolean;
    /** Use safe area insets for notched devices */
    safeArea?: boolean;
}
/**
 * MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
 *
 * This component automatically detects the viewport size and renders the appropriate layout:
 * - **Desktop** (≥1024px): Standard Layout with sidebar, gutter, and scrollable content
 * - **Mobile/Tablet** (<1024px): Mobile header, drawer navigation, bottom tab bar
 *
 * The mobile layout features:
 * - Sticky header with hamburger menu to open drawer
 * - Sidebar rendered as a slide-in drawer
 * - Bottom navigation bar for primary navigation
 * - Safe area support for notched devices
 *
 * @example Basic usage
 * ```tsx
 * <MobileLayout
 *   sidebarItems={[
 *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
 *     { id: 'tasks', label: 'Tasks', icon: <CheckSquare />, href: '/tasks' },
 *     { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
 *   ]}
 *   currentPath={location.pathname}
 *   onNavigate={(href) => navigate(href)}
 *   title="My App"
 *   header={<Logo />}
 *   userProfile={<UserProfileButton user={user} />}
 * >
 *   <Page>
 *     <h1>Dashboard</h1>
 *   </Page>
 * </MobileLayout>
 * ```
 *
 * @example With custom bottom nav items
 * ```tsx
 * <MobileLayout
 *   sidebarItems={fullNavItems}
 *   bottomNavItems={[
 *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
 *     { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
 *     { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' }
 *   ]}
 *   currentPath={location.pathname}
 *   title="My App"
 * >
 *   {children}
 * </MobileLayout>
 * ```
 *
 * @example Force mobile layout for testing
 * ```tsx
 * <MobileLayout
 *   sidebarItems={items}
 *   title="Mobile Preview"
 *   forceMobile
 * >
 *   {children}
 * </MobileLayout>
 * ```
 */
export declare const MobileLayout: React.FC<MobileLayoutProps>;
export default MobileLayout;
//# sourceMappingURL=MobileLayout.d.ts.map