@lobehub/ui/es/Layout/Layout.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"Layout.mjs","names":[],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                placement=\"left\"\n                onExpandChange={setExpand}\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAE/F,MAAM,eAAe,eACZ,EACL,0BAA0B,GAAG,aAAa,KAC3C,GACD,CAAC,aAAa,CACf;CACD,MAAM,EAAE,QAAQ,WAAW,eAAe;CAC1C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,iBAAgB;AACd,YAAU,QAAQ,OAAO,CAAC;IACzB,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC,OAAD;EAAK,OAAO;YAAZ;GACG;GACA,UACC,qBAAC,cAAD;IAA4B;cAA5B,CACG,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,KAAgB,CAAA,CACjC;;GAEjB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,UAAU,EAAI,CAAA;IAC1D,CAAC,UAAU,WACV,oBAAC,eAAD;KAA6B;eAC3B,oBAAC,gBAAD;MACU;MACR,UAAU;MACV,WAAU;MACV,gBAAgB;gBAEhB,oBAAC,oBAAD;OAAkC;iBAAe;OAA6B,CAAA;MAC/D,CAAA;KACH,CAAA;IAElB,oBAAC,WAAD;KAAS,WAAW,OAAO;KAAU;KAAmB,CAAA;IACvD,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;eAAW;KAAgB,CAAA;IACxD,EAAA,CAAA;GACZ,UAAU,oBAAC,cAAD,EAAA,UAAe,QAAsB,CAAA;GAC5C;;EAGX"}