From 21c5e5919b92284c79cb2d8472c5fde33b62bb15 Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Tue, 30 Jan 2024 12:15:26 +0330
Subject: [PATCH] add header and sidebar sample

---
 src/app/(withAuth)/dashboard/template.js      | 21 +++--
 .../dashboard/headerWithLogo/index.jsx        |  9 ++
 .../dashboard/headerWithSidebar/index.jsx     | 92 +++++++++++++++++++
 3 files changed, 116 insertions(+), 6 deletions(-)
 create mode 100644 src/components/layouts/dashboard/headerWithLogo/index.jsx
 create mode 100644 src/components/layouts/dashboard/headerWithSidebar/index.jsx

diff --git a/src/app/(withAuth)/dashboard/template.js b/src/app/(withAuth)/dashboard/template.js
index 1d86153..ba4af8f 100644
--- a/src/app/(withAuth)/dashboard/template.js
+++ b/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 (
-        <>
-            header
-            sidebar
+    return (<Stack>
+        <HeaderWithLogo headerHeight={headerHeight}/>
+        <HeaderWithSidebar offsetHeaders={offsetHeaders}>
             {children}
-        </>
-    )
+        </HeaderWithSidebar>
+    </Stack>)
 }
 
 export default Template
\ No newline at end of file
diff --git a/src/components/layouts/dashboard/headerWithLogo/index.jsx b/src/components/layouts/dashboard/headerWithLogo/index.jsx
new file mode 100644
index 0000000..40d3743
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/layouts/dashboard/headerWithSidebar/index.jsx b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
new file mode 100644
index 0000000..bf96b36
--- /dev/null
+++ b/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
\ No newline at end of file