debug header flow by mohammad

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

@@ -1,19 +1,15 @@
-import {Stack} from "@mui/material";
+import {Box, 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 (<Stack>
-        <HeaderWithLogo headerHeight={headerHeight}/>
-        <HeaderWithSidebar offsetHeaders={offsetHeaders}>
-            {children}
-        </HeaderWithSidebar>
+        <HeaderWithLogo/>
+        <Box>
+            <HeaderWithSidebar>
+                {children}
+            </HeaderWithSidebar>
+        </Box>
     </Stack>)
 }
 

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

@@ -1,9 +1,9 @@
-import {Box} from "@mui/material";
+import {Box, Stack} 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>
-    </>)
+const HeaderWithLogo = () => {
+    return (<Stack>
+        <Box>header1</Box>
+        <Box>header2</Box>
+    </Stack>)
 }
 export default HeaderWithLogo

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

@@ -36,7 +36,7 @@ const DrawerHeader = styled('div')(({theme}) => ({
     ...theme.mixins.toolbar, justifyContent: 'flex-end',
 }));
 
-const HeaderWithSidebar = ({children, offsetHeaders}) => {
+const HeaderWithSidebar = ({children}) => {
     const [open, setOpen] = useState(false);
 
     const handleDrawerOpen = () => {
@@ -47,7 +47,7 @@ const HeaderWithSidebar = ({children, offsetHeaders}) => {
         setOpen(false);
     };
     return (<Box sx={{display: 'flex'}}>
-        <AppBar sx={{position: 'fixed', top: offsetHeaders}} elevation={0} open={open}>
+        <AppBar sx={{position: 'fixed', top: "unset"}} elevation={0} open={open}>
             <Toolbar>
                 <IconButton
                     color="inherit"
@@ -68,9 +68,9 @@ const HeaderWithSidebar = ({children, offsetHeaders}) => {
                 width: drawerWidth, flexShrink: 0, '& .MuiDrawer-paper': {
                     width: drawerWidth,
                     boxSizing: 'border-box',
-                    top: offsetHeaders,
                     borderTop: 1,
-                    borderTopColor: 'divider'
+                    borderTopColor: 'divider',
+                    top: "unset"
                 },
             }}
             variant="persistent"
@@ -83,7 +83,7 @@ const HeaderWithSidebar = ({children, offsetHeaders}) => {
                 </IconButton>
             </DrawerHeader>
         </Drawer>
-        <Main elevation={0} sx={{mt: `${offsetHeaders}px`}} open={open}>
+        <Main elevation={0} open={open}>
             <DrawerHeader/>
             {children}
         </Main>