@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,IAC5C,IACA,CAAC,YAAY,CACf;CACA,MAAM,EAAE,QAAQ,WAAW,cAAc;CACzC,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CACzC,gBAAgB;EACd,UAAU,QAAQ,MAAM,CAAC;CAC3B,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,OAAD;EAAK,OAAO;YAAZ;GACG;GACA,UACC,qBAAC,cAAD;IAA4B;cAA5B,CACG,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,IAAe,CAAA,CACjC;;GAEhB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,SAAS,EAAI,CAAA;IACzD,CAAC,UAAU,WACV,oBAAC,eAAD;KAA6B;eAC3B,oBAAC,gBAAD;MACU;MACR,UAAU;MACV,WAAU;MACV,gBAAgB;gBAEhB,oBAAC,oBAAD;OAAkC;iBAAe;MAA4B,CAAA;KAC/D,CAAA;IACH,CAAA;IAEjB,oBAAC,WAAD;KAAS,WAAW,OAAO;KAAU;IAAkB,CAAA;IACtD,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;eAAW;IAAe,CAAA;GACxD,EAAA,CAAA;GACX,UAAU,oBAAC,cAAD,EAAA,UAAe,OAAqB,CAAA;EAC5C;;AAET,CACF"}