141 lines
3.5 KiB
TypeScript
141 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { FC, PropsWithChildren, useEffect, useState } from "react";
|
|
import { SetupModeWarning } from "./SetupModeWarning";
|
|
import {
|
|
AppBar as MuiAppBar,
|
|
ToolbarProps,
|
|
Box,
|
|
Grid,
|
|
IconButton,
|
|
styled,
|
|
Toolbar,
|
|
Typography,
|
|
Menu,
|
|
useTheme,
|
|
useMediaQuery,
|
|
} from "@mui/material";
|
|
import { Sidebar } from "./Sidebar";
|
|
import {
|
|
ExpandCircleDown,
|
|
MenuBookTwoTone,
|
|
MenuSharp,
|
|
} from "@mui/icons-material";
|
|
import { fonts } from "@link-stack/ui";
|
|
import Image from "next/image";
|
|
import LinkLogo from "public/link-logo-small.png";
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface InternalLayoutProps extends PropsWithChildren {
|
|
setupModeActive: boolean;
|
|
leafcutterEnabled: boolean;
|
|
}
|
|
|
|
export const InternalLayout: FC<InternalLayoutProps> = ({
|
|
children,
|
|
setupModeActive,
|
|
leafcutterEnabled,
|
|
}) => {
|
|
const { poppins } = fonts;
|
|
|
|
const theme = useTheme();
|
|
const mobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [openWidth, setOpenWidth] = useState<number>(0);
|
|
const [closedWidth, setClosedWidth] = useState<number>(0);
|
|
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
// On mobile, close menu when stuff is selected
|
|
if (mobile) {
|
|
setOpen(false);
|
|
}
|
|
}, [pathname]);
|
|
|
|
useEffect(() => {
|
|
setClosedWidth(mobile ? 0 : 70);
|
|
setOpenWidth(270);
|
|
setOpen(!mobile);
|
|
}, [mobile]);
|
|
|
|
interface HeaderBarProps extends ToolbarProps {
|
|
open?: boolean;
|
|
}
|
|
|
|
const HeaderBar = styled(Toolbar, {
|
|
shouldForwardProp: (prop) => prop !== "open",
|
|
})<HeaderBarProps>(({ theme, open }) => ({
|
|
backgroundColor: "#25272A",
|
|
width: "100%",
|
|
height: "56px",
|
|
}));
|
|
|
|
return (
|
|
<Box sx={{ position: "relative" }}>
|
|
<SetupModeWarning setupModeActive={setupModeActive} />
|
|
<Grid container direction="row">
|
|
{mobile ? (<MuiAppBar>
|
|
<HeaderBar>
|
|
<IconButton
|
|
sx={{ color: "white" }}
|
|
aria-label="open drawer"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<MenuSharp />
|
|
</IconButton>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: 26,
|
|
color: "white",
|
|
fontWeight: 700,
|
|
fontFamily: poppins.style.fontFamily,
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
CDR Link
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
width: "40px",
|
|
height: "40px",
|
|
margin: open ? "0" : "0 auto",
|
|
}}
|
|
>
|
|
<Image
|
|
src={LinkLogo}
|
|
alt="Link logo"
|
|
width={40}
|
|
height={40}
|
|
style={{
|
|
objectFit: "cover",
|
|
filter: "grayscale(100) brightness(100)",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</HeaderBar>
|
|
</MuiAppBar>) : (null)}
|
|
<Sidebar
|
|
open={open}
|
|
setOpen={setOpen}
|
|
openWidth={openWidth}
|
|
closedWidth={closedWidth}
|
|
/>
|
|
<Grid
|
|
item
|
|
sx={{
|
|
mt: { xs: "56px", sm: "0" },
|
|
ml: { xs: open ? "270px" : "0px", sm: open ? "270px" : "70px" },
|
|
width: "100%",
|
|
height: { xs: "calc(100vh - 56px)", sm: "100vh" },
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{children as any}
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|