Layout System

/**
 * Main layout component providing the overall structure for admin pages
 * @param props - Layout configuration props
 * @returns Complete layout with sidebar, app bar, and content area
 */
function Layout(props: LayoutProps): ReactElement;

interface LayoutProps {
  /** Child components to render in the main content area */
  children?: ReactNode;
  /** Custom sidebar component */
  sidebar?: ComponentType<SidebarProps>;
  /** Custom app bar component */
  appBar?: ComponentType<AppBarProps>;
  /** Custom menu component for navigation */
  menu?: ComponentType<MenuProps>;
  /** Custom error component */
  error?: ComponentType;
  /** Custom loading component */
  loading?: ComponentType;
}

/**
 * Application header component with navigation and user menu
 * @param props - AppBar configuration props
 * @returns Header component with navigation elements
 */
function AppBar(props: AppBarProps): ReactElement;

interface AppBarProps {
  /** Custom user menu component */
  userMenu?: ComponentType<UserMenuProps>;
  /** Application title */
  title?: string;
  /** Custom title component */
  titleComponent?: ComponentType<TitleProps>;
  /** App bar color variant */
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
  /** App bar position */
  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
}

/**
 * Navigation sidebar component with collapsible functionality
 * @param props - Sidebar configuration props
 * @returns Sidebar component with navigation menu
 */
function Sidebar(props: SidebarProps): ReactElement;

interface SidebarProps {
  /** Custom menu component */
  menu?: ComponentType<MenuProps>;
  /** Sidebar width when open */
  width?: number;
  /** Whether sidebar is collapsible */
  collapsible?: boolean;
  /** Custom close button component */
  closeButton?: ComponentType;
}

/**
 * Main navigation menu component with resource-based menu items
 * @param props - Menu configuration props
 * @returns Navigation menu with resource links
 */
function Menu(props: MenuProps): ReactElement;

interface MenuProps {
  /** Whether to show dashboard menu item */
  hasDashboard?: boolean;
  /** Custom dashboard menu item component */
  dashboardMenuItem?: ComponentType<DashboardMenuItemProps>;
  /** Dense menu styling */
  dense?: boolean;
  /** Menu variant */
  variant?: 'permanent' | 'persistent' | 'temporary';
}

/**
 * Individual menu item component for navigation links
 * @param props - MenuItemLink configuration props
 * @returns Menu item with navigation link
 */
function MenuItemLink(props: MenuItemLinkProps): ReactElement;

interface MenuItemLinkProps {
  /** Navigation target path */
  to: string;
  /** Menu item label */
  primaryText: string;
  /** Left icon component */
  leftIcon?: ReactElement;
  /** Click handler */
  onClick?: () => void;
  /** Dense styling */
  dense?: boolean;
}

/**
 * Page title component with automatic document title setting
 */
function Title(props: TitleProps): ReactElement;

/**
 * Loading indicator component with Material UI styling
 */
function Loading(props: LoadingProps): ReactElement;

/**
 * Error display component with retry functionality
 */
function Error(props: ErrorProps): ReactElement;

/**
 * 404 not found page component
 */
function NotFound(props: NotFoundProps): ReactElement;

interface TitleProps {
  title?: string;
  defaultTitle?: string;
}

interface LoadingProps {
  loadingPrimary?: string;
  loadingSecondary?: string;
}

interface ErrorProps {
  error?: any;
  errorComponent?: ComponentType;
  errorInfo?: any;
}

/**
 * Hook for accessing and managing sidebar open/closed state
 * @returns Array with current state and setter function
 */
function useSidebarState(): [boolean, (open: boolean) => void];

/**
 * Hook for toggling sidebar open/closed state
 * @returns Function to toggle sidebar state
 */
function useToggleSidebar(): () => void;

import { Layout, AppBar, Sidebar, Menu, useSidebarState } from "ra-ui-materialui";

// Basic layout usage
const MyLayout = (props) => (
  <Layout {...props} />
);

// Custom layout with sidebar management
const CustomLayout = (props) => {
  const [sidebarOpen, setSidebarOpen] = useSidebarState();
  
  return (
    <Layout 
      {...props}
      sidebar={<Sidebar />}
      appBar={<AppBar />}
    />
  );
};

// Custom app bar
const CustomAppBar = () => (
  <AppBar
    title="My Admin"
    color="primary"
    userMenu={<UserMenu />}
  />
);

interface Theme {
  palette: PaletteOptions;
  typography: TypographyOptions;
  spacing: SpacingOptions;
  breakpoints: BreakpointsOptions;
  components?: ComponentsOverrides;
}

interface DashboardMenuItemProps {
  locale?: string;
  onClick?: () => void;
  dense?: boolean;
}

interface UserMenuProps {
  logout?: ReactElement;
  profileMenu?: ReactElement;
  icon?: ReactElement;
}