@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
63 lines (60 loc) • 2.29 kB
JavaScript
'use client';
import DraggablePanel_default from "../DraggablePanel/index.mjs";
import { styles } from "./style.mjs";
import LayoutFooter_default from "./components/LayoutFooter.mjs";
import LayoutHeader_default from "./components/LayoutHeader.mjs";
import LayoutMain_default from "./components/LayoutMain.mjs";
import LayoutSidebar_default from "./components/LayoutSidebar.mjs";
import LayoutSidebarInner_default from "./components/LayoutSidebarInner.mjs";
import LayoutToc_default from "./components/LayoutToc.mjs";
import { memo, useEffect, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useResponsive } from "antd-style";
//#region src/Layout/Layout.tsx
const Layout = memo(({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {
const cssVariables = useMemo(() => ({ "--layout-header-height": `${headerHeight}px` }), [headerHeight]);
const { mobile, laptop } = useResponsive();
const [expand, setExpand] = useState(true);
useEffect(() => {
setExpand(Boolean(laptop));
}, [laptop]);
return /* @__PURE__ */ jsxs("div", {
style: cssVariables,
children: [
helmet,
header && /* @__PURE__ */ jsxs(LayoutHeader_default, {
headerHeight,
children: [header, mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, { children: toc })]
}),
/* @__PURE__ */ jsxs(LayoutMain_default, { children: [
!mobile && !sidebar && /* @__PURE__ */ jsx("nav", { style: { width: tocWidth } }),
!mobile && sidebar && /* @__PURE__ */ jsx(LayoutSidebar_default, {
headerHeight,
children: /* @__PURE__ */ jsx(DraggablePanel_default, {
expand,
maxWidth: asideWidth,
onExpandChange: setExpand,
placement: "left",
children: /* @__PURE__ */ jsx(LayoutSidebarInner_default, {
headerHeight,
children: sidebar
})
})
}),
/* @__PURE__ */ jsx("section", {
className: styles.content,
children
}),
!mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, {
tocWidth,
children: toc
})
] }),
footer && /* @__PURE__ */ jsx(LayoutFooter_default, { children: footer })
]
});
});
var Layout_default = Layout;
//#endregion
export { Layout_default as default };
//# sourceMappingURL=Layout.mjs.map