Spaces:
Runtime error
Runtime error
File size: 2,918 Bytes
cd6f98e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import clsx from "clsx";
import type { ReactNode } from "react";
import { useState } from "react";
import AppHead from "../components/AppHead";
import LeftSidebar from "../components/drawer/LeftSidebar";
import { SidebarControlButton } from "../components/drawer/Sidebar";
import { useConfigStore } from "../stores/configStore";
type SidebarSettings = {
mobile: boolean;
desktop: boolean;
};
type DashboardLayoutProps = {
children: ReactNode;
rightSidebar?: ReactNode;
onReload?: () => void;
};
const defaultState: SidebarSettings = {
mobile: false,
desktop: true,
};
const setMobile =
(settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
setSettings({
mobile: open,
desktop: settings.desktop,
});
const setDesktop =
(settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
setSettings({
mobile: settings.mobile,
desktop: open,
});
const DashboardLayout = (props: DashboardLayoutProps) => {
const [leftSettings, setLeftSettings] = useState(defaultState);
const { layout, setLayout } = useConfigStore();
return (
<>
<AppHead />
{/* Left sidebar */}
{/* Mobile */}
<LeftSidebar
show={leftSettings.mobile}
setShow={setMobile(leftSettings, setLeftSettings)}
onReload={props.onReload}
/>
<div className={leftSettings.mobile ? "hidden" : "lg:hidden"}>
<SidebarControlButton
side="left"
show={leftSettings.mobile}
setShow={setMobile(leftSettings, setLeftSettings)}
/>
</div>
{/* Desktop */}
<div className="hidden lg:visible lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
<LeftSidebar
show={leftSettings.desktop}
setShow={setDesktop(leftSettings, setLeftSettings)}
onReload={props.onReload}
/>
</div>
<div className={leftSettings.desktop ? "hidden" : "hidden lg:block"}>
<SidebarControlButton
side="left"
show={leftSettings.desktop}
setShow={setDesktop(leftSettings, setLeftSettings)}
/>
</div>
{/* Right sidebar */}
{/* Mobile */}
{props.rightSidebar && (
<>
<div className="lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">{props.rightSidebar}</div>
<SidebarControlButton
side="right"
show={layout.showRightSidebar}
setShow={(show) => setLayout({ showRightSidebar: show })}
/>
</>
)}
<main
className={clsx(
"bg-gradient-to-b from-slate-7 to-slate-3",
leftSettings.desktop && "lg:pl-64",
props.rightSidebar && layout.showRightSidebar && "lg:pr-64"
)}
>
<div className="min-w-screen min-h-screen">{props.children}</div>
</main>
</>
);
};
export default DashboardLayout;
|