56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import classNames from "classnames";
|
|
import React, { useEffect, useLayoutEffect } from "react";
|
|
import Scrollbar from "react-scrollbars-custom";
|
|
import { WithRouteProps } from "routes";
|
|
import { withRouteParams } from "routes/withRoute";
|
|
import { useUIViewModel } from "ui/controller/uiViewModel";
|
|
import { useUIStore } from "ui/data/uiSlice";
|
|
import DrawerController from "ui/views/DrawerController";
|
|
import Header from "./parts/Header";
|
|
import SideNav from "./parts/sidenav/SideNav";
|
|
|
|
type Props = {
|
|
title?: string;
|
|
withOutlet?: boolean;
|
|
children: React.ReactElement<WithRouteProps>;
|
|
} & WithRouteProps;
|
|
|
|
const Page = ({ title, withOutlet, children, activePath }: Props) => {
|
|
const uiStore = useUIStore();
|
|
const { isDrawerCollapsed, initDrawer } = useUIViewModel(uiStore);
|
|
|
|
useLayoutEffect(() => {
|
|
initDrawer();
|
|
}, [initDrawer]);
|
|
|
|
return (
|
|
<div className="grid grid-flow-col grid-rows-page grid-cols-layout max-h-screen overflow-hidden transition-all">
|
|
<header className="col-span-2">
|
|
<Header title={title} />
|
|
</header>
|
|
<aside
|
|
className={classNames(
|
|
"group overflow-hidden space-y-1 pt-6 bg-aside border-serv-800 transition-[width]",
|
|
isDrawerCollapsed ? "w-24" : "1.5xl:w-80 2xl:w-96"
|
|
)}
|
|
>
|
|
<Scrollbar>
|
|
<div className="px-6 py-1">
|
|
<SideNav collapsed={isDrawerCollapsed} />
|
|
</div>
|
|
</Scrollbar>
|
|
</aside>
|
|
<main className="relative rounded-lg m-2 pl-24 bg-main shadow-lg shadow-serv-900/20">
|
|
<div className="absolute -left-5 top-6">
|
|
<DrawerController />
|
|
</div>
|
|
<Scrollbar>
|
|
<div className="px-8 pt-20">{children}</div>
|
|
</Scrollbar>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withRouteParams(Page);
|