Main Layout

/**
 * Main enterprise layout component with comprehensive customization options
 * @param props - ProLayout configuration and content
 * @returns React element rendering the complete layout
 */
function ProLayout(props: ProLayoutProps): React.ReactElement;

interface ProLayoutProps {
  /** Minimal mode without layout chrome, only provides context */
  pure?: boolean;
  
  /** Logo configuration - can be URL, React component, function, or false to hide */
  logo?: React.ReactNode | false | (() => React.ReactNode);
  
  /** Callback triggered when page location changes */
  onPageChange?: (location?: { pathname?: string }) => void;
  
  /** Global loading state for the entire layout */
  loading?: boolean;
  
  /** Internationalization locale configuration */
  locale?: LocaleType;
  
  /** Sidebar collapse state */
  collapsed?: boolean;
  
  /** Callback when sidebar collapse state changes */
  onCollapse?: (collapsed: boolean) => void;
  
  /** Layout mode: sidebar, top navigation, or mixed */
  layout?: 'side' | 'top' | 'mix';
  
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  
  /** Content width mode (only works with top layout) */
  contentWidth?: 'Fluid' | 'Fixed';
  
  /** Fixed header to top of viewport */
  fixedHeader?: boolean;
  
  /** Fixed sidebar to left of viewport */
  fixSiderbar?: boolean;
  
  /** Primary brand color */
  colorPrimary?: string;
  
  /** Split menus in mix layout mode */
  splitMenus?: boolean;
  
  /** Suppress sidebar when menu is empty */
  suppressSiderWhenMenuEmpty?: boolean;
  
  /** Layout title shown in header and browser tab */
  title?: string | false;
  
  /** Custom icon font URL */
  iconfontUrl?: string;
  
  /** Menu configuration object */
  menu?: MenuConfig;
  
  /** Route configuration for breadcrumbs and menu generation */
  route?: Route;
  
  /** Custom footer renderer */
  footerRender?: WithFalse<(props: any, defaultDom: React.ReactNode) => React.ReactNode>;
  
  /** Custom breadcrumb renderer */
  breadcrumbRender?: WithFalse<(routers: any[]) => React.ReactNode>;
  
  /** Custom page title renderer */
  pageTitleRender?: WithFalse<(props: any, defaultPageTitle?: string) => React.ReactNode>;
  
  /** Menu data processor function */
  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
  
  /** Background layout images configuration */
  bgLayoutImgList?: BackgroundImage[];
  
  /** Custom styling for header and sidebar */
  stylish?: {
    header?: GenerateStyle<any>;
    sider?: GenerateStyle<any>;
  };
  
  /** Child components (page content) */
  children?: React.ReactNode;
}

interface MenuConfig {
  /** Enable/disable internationalization for menu items */
  locale?: boolean;
  
  /** Hide menu when sidebar is collapsed */
  hideMenuWhenCollapsed?: boolean;
  
  /** Show title even when collapsed */
  collapsedShowTitle?: boolean;
  
  /** Show group title even when collapsed */
  collapsedShowGroupTitle?: boolean;
  
  /** Default open all menu items */
  defaultOpenAll?: boolean;
  
  /** Ignore manually collapsed menu state */
  ignoreFlatMenu?: boolean;
  
  /** Menu loading state */
  loading?: boolean;
  
  /** Loading state change callback */
  onLoadingChange?: (loading?: boolean) => void;
  
  /** Parameters for remote menu request */
  params?: Record<string, any>;
  
  /** Async function to fetch menu data */
  request?: (
    params: Record<string, any>,
    defaultMenuData: MenuDataItem[]
  ) => Promise<MenuDataItem[]>;
  
  /** Menu display type */
  type?: 'sub' | 'group';
  
  /** Disable automatic menu closing */
  autoClose?: false;
}

interface BackgroundImage {
  /** Image source URL */
  src?: string;
  /** Image width */
  width?: string;
  /** Image height */
  height?: string;
  /** Left position */
  left?: number;
  /** Top position */
  top?: number;
  /** Bottom position */
  bottom?: number;
  /** Right position */
  right?: number;
}

interface Route {
  /** Child routes */
  children?: Route[];
  /** Route path */
  path?: string;
  /** Route name */
  name?: string;
  /** Route icon */
  icon?: React.ReactNode;
  /** Hide in menu */
  hideInMenu?: boolean;
  /** Hide children in menu */
  hideChildrenInMenu?: boolean;
  /** Route component */
  component?: React.ComponentType<any>;
  /** Additional route properties */
  [key: string]: any;
}

import React, { useState } from "react";
import ProLayout from "@ant-design/pro-layout";
import type { MenuDataItem } from "@ant-design/pro-layout";

// Basic usage
function BasicLayout() {
  const [collapsed, setCollapsed] = useState(false);
  
  const menuData: MenuDataItem[] = [
    {
      path: "/dashboard",
      name: "Dashboard",
      icon: "DashboardOutlined",
    },
    {
      path: "/users",
      name: "User Management",
      icon: "UserOutlined",
      children: [
        { path: "/users/list", name: "User List" },
        { path: "/users/roles", name: "Role Management" },
      ],
    },
  ];

  return (
    <ProLayout
      title="Admin Dashboard"
      logo="https://example.com/logo.png"
      layout="side"
      navTheme="light"
      fixedHeader
      fixSiderbar
      collapsed={collapsed}
      onCollapse={setCollapsed}
      menu={{
        request: async () => menuData,
        defaultOpenAll: true,
      }}
      route={{
        children: menuData,
      }}
      onPageChange={(location) => {
        console.log('Page changed to:', location?.pathname);
      }}
    >
      <div>Your page content here</div>
    </ProLayout>
  );
}

// Advanced usage with custom rendering
function AdvancedLayout() {
  return (
    <ProLayout
      title="Enterprise App"
      layout="mix"
      navTheme="realDark"
      colorPrimary="#1890ff"
      splitMenus
      footerRender={(props, defaultDom) => (
        <div style={{ textAlign: 'center' }}>
          © 2023 My Company. All Rights Reserved.
        </div>
      )}
      breadcrumbRender={(routers) => [
        { breadcrumbName: 'Home', path: '/' },
        ...routers,
      ]}
      pageTitleRender={(props, defaultPageTitle) => (
        `${defaultPageTitle} - Enterprise App`
      )}
      menuDataRender={(menuData) => 
        menuData.filter(item => !item.hideInMenu)
      }
    >
      <div>Your content</div>
    </ProLayout>
  );
}

// Minimal pure mode
function PureLayout() {
  return (
    <ProLayout pure>
      <div>Content with layout context but no UI chrome</div>
    </ProLayout>
  );
}