add header and sidebar sample

src/app/(withAuth)/dashboard/template.js

@@ -1,11 +1,20 @@
+import {Stack} from "@mui/material";
+import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
+import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
+
+const headerHeight = {
+    header1: 50,
+    header2: 50
+}
+const offsetHeaders = headerHeight.header1 + headerHeight.header2
+
 const Template = ({children}) => {
-    return (
+    return (<Stack>
-        <>
+        <HeaderWithLogo headerHeight={headerHeight}/>
-            header
+        <HeaderWithSidebar offsetHeaders={offsetHeaders}>
-            sidebar
             {children}
-        </>
+        </HeaderWithSidebar>
-    )
+    </Stack>)
 }
 
 export default Template

src/components/layouts/dashboard/headerWithLogo/index.jsx

@@ -0,0 +1,9 @@
+import {Box} from "@mui/material";
+
+const HeaderWithLogo = ({headerHeight}) => {
+    return (<>
+        <Box sx={{position: 'fixed', height: headerHeight.header1, top: 0}}>header1</Box>
+        <Box sx={{position: 'fixed', height: headerHeight.header2, top: headerHeight.header1}}>header2</Box>
+    </>)
+}
+export default HeaderWithLogo

src/components/layouts/dashboard/headerWithSidebar/index.jsx

@@ -0,0 +1,92 @@
+'use client'
+import {useState} from "react";
+import {Box, Drawer, IconButton, Paper, styled, Toolbar, Typography} from "@mui/material";
+import MuiAppBar from '@mui/material/AppBar';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+const drawerWidth = 260;
+
+const Main = styled(Paper, {shouldForwardProp: (prop) => prop !== 'open'})(({theme, open}) => ({
+    flexGrow: 1, transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
+    }), marginLeft: `-${drawerWidth}px`, ...(open && {
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
+        }), marginLeft: 0,
+    }),
+}),);
+
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({theme, open}) => ({
+    transition: theme.transitions.create(['margin', 'width'], {
+        easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
+    }), ...(open && {
+        width: `calc(100% - ${drawerWidth}px)`,
+        marginLeft: `${drawerWidth}px`,
+        transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
+
+const DrawerHeader = styled('div')(({theme}) => ({
+    display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar
+    ...theme.mixins.toolbar, justifyContent: 'flex-end',
+}));
+
+const HeaderWithSidebar = ({children, offsetHeaders}) => {
+    const [open, setOpen] = useState(false);
+
+    const handleDrawerOpen = () => {
+        setOpen(true);
+    };
+
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+    return (<Box sx={{display: 'flex'}}>
+        <AppBar sx={{position: 'fixed', top: offsetHeaders}} elevation={0} open={open}>
+            <Toolbar>
+                <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    onClick={handleDrawerOpen}
+                    edge="start"
+                    sx={{mr: 2, ...(open && {display: 'none'})}}
+                >
+                    <MenuIcon/>
+                </IconButton>
+                <Typography variant="h6" noWrap component="div">
+                    menu
+                </Typography>
+            </Toolbar>
+        </AppBar>
+        <Drawer
+            sx={{
+                width: drawerWidth, flexShrink: 0, '& .MuiDrawer-paper': {
+                    width: drawerWidth,
+                    boxSizing: 'border-box',
+                    top: offsetHeaders,
+                    borderTop: 1,
+                    borderTopColor: 'divider'
+                },
+            }}
+            variant="persistent"
+            anchor="left"
+            open={open}
+        >
+            <DrawerHeader>
+                <IconButton onClick={handleDrawerClose}>
+                    <ChevronRightIcon/>
+                </IconButton>
+            </DrawerHeader>
+        </Drawer>
+        <Main elevation={0} sx={{mt: `${offsetHeaders}px`}} open={open}>
+            <DrawerHeader/>
+            {children}
+        </Main>
+    </Box>)
+}
+export default HeaderWithSidebar