formatting

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

@@ -1,26 +1,41 @@
 "use client";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import Image from "next/image";
 import RmsLogo from "@/assets/images/rmsLogo.png";
+import HeaderLogo from "@/assets/images/headerLogo.png";
 
 const HeaderBottom = () => {
     return (
         <Stack
+            direction="row"
+            justifyContent={"space-between"}
             sx={{
                 px: 2,
                 py: 1,
                 background: (theme) => theme.palette.primary2.main,
             }}
-            spacing={4}
+            spacing={2}
-            alignItems={"center"}
-            direction={"row"}
         >
-            <Image alt="" priority src={RmsLogo.src} width={50} height={54} />
+            <Stack spacing={4} alignItems={"center"} direction={"row"}>
-            <Stack alignItems={"center"} spacing={1}>
+                <Image alt="" priority src={RmsLogo.src} width={50} height={54} />
-                <Typography variant="h6" sx={{ color: (theme) => theme.palette.primary2.contrastText }}>
+                <Stack alignItems={"center"} spacing={1}>
-                    سامانه جامع راهداری
+                    <Typography variant="h6" sx={{ color: (theme) => theme.palette.primary2.contrastText }}>
-                </Typography>
+                        سامانه جامع راهداری
-                <Typography sx={{ color: (theme) => theme.palette.primary2.contrastText }}>rms.rmto.ir</Typography>
+                    </Typography>
+                    <Typography sx={{ color: (theme) => theme.palette.primary2.contrastText }}>rms.rmto.ir</Typography>
+                </Stack>
+            </Stack>
+            <Stack sx={{ display: { xs: 'none', sm: 'flex' } }}>
+                <Box sx={{
+                    p: 1,
+                    background: "#fff",
+                    border: 2,
+                    borderColor: (theme) => theme.palette.primary.main,
+                    borderRadius: 2,
+                    borderStyle: "dashed",
+                }}>
+                    <Image alt="" priority src={HeaderLogo.src} width={140} height={32} />
+                </Box>
             </Stack>
         </Stack>
     );

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

@@ -1,12 +0,0 @@
-import { Stack } from "@mui/material";
-import Image from "next/image";
-import HeaderLogo from "@/assets/images/headerLogo.png";
-
-const HeaderTop = () => {
-    return (
-        <Stack sx={{ p: 2 }}>
-            <Image alt="" priority src={HeaderLogo.src} width={140} height={32} />
-        </Stack>
-    );
-};
-export default HeaderTop;

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

@@ -1,11 +1,9 @@
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
-import HeaderTop from "./HaederTop";
 import HeaderBottom from "./HaederBottom";
 
 const HeaderWithLogo = () => {
     return (
         <Stack sx={{ width: "100%", position: "fixed", zIndex: 1200, background: "#fff" }}>
-            <HeaderTop />
             <HeaderBottom />
         </Stack>
     );

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx

@@ -1,10 +1,12 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
+import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, useMediaQuery, useTheme } from "@mui/material";
 import Link from "next/link";
 import SidebarBadge from "./SidebarBadge";
 import SidebarSubitems from "./SidebarSubitems";
 
-const SidebarListItems = ({ menuItem, dispatch }) => {
+const SidebarListItems = ({ menuItem, dispatch, handleDrawerClose }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
     return (
         <>
             <ListItem disablePadding divider>
@@ -17,6 +19,10 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
                     onClick={() => {
                         if (menuItem.type !== "page") {
                             dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
+                        } else {
+                            if (isMobile) {
+                                handleDrawerClose()
+                            }
                         }
                     }}
                 >
@@ -56,7 +62,7 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
                         }}
                     >
                         {menuItem.Subitems.map((subitem, index) => {
-                            return <SidebarSubitems key={index} dispatch={dispatch} subitem={subitem} />;
+                            return <SidebarSubitems handleDrawerClose={handleDrawerClose} key={index} dispatch={dispatch} subitem={subitem} />;
                         })}
                     </List>
                 ) : null}

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarMenu.jsx

@@ -54,16 +54,16 @@ function reducer(state, action) {
             return state.map((item) =>
                 item.hasSubitems
                     ? {
-                          ...item,
+                        ...item,
-                          Subitems: item.Subitems.map((subitem) =>
+                        Subitems: item.Subitems.map((subitem) =>
-                              subitem.hasSubitems
+                            subitem.hasSubitems
-                                  ? {
+                                ? {
-                                        ...subitem,
+                                    ...subitem,
-                                        Subitems: toggleSubitems(subitem.Subitems, action.id),
+                                    Subitems: toggleSubitems(subitem.Subitems, action.id),
-                                    }
+                                }
-                                  : subitem
+                                : subitem
-                          ),
+                        ),
-                      }
+                    }
                     : item
             );
 
@@ -75,7 +75,7 @@ function reducer(state, action) {
     }
 }
 
-const SidebarMenu = () => {
+const SidebarMenu = ({ handleDrawerClose }) => {
     const { data: userPermissions } = usePermissions();
     const [menuItems, dispatch] = useReducer(reducer, process.env.NODE_ENV == "production" ? pageMenu : pageMenuDev);
     const pathname = usePathname();
@@ -105,7 +105,7 @@ const SidebarMenu = () => {
             {userPermissions && (
                 <List sx={{ overflow: "auto", flex: 1 }} disablePadding dense>
                     {menuItems.map((menuItem) => {
-                        return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
+                        return <SidebarListItems handleDrawerClose={handleDrawerClose} dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
                     })}
                 </List>
             )}

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx

@@ -1,9 +1,11 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
+import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, useMediaQuery, useTheme } from "@mui/material";
 import Link from "next/link";
 import SidebarBadge from "./SidebarBadge";
 
-const SidebarSubitems = ({ subitem, dispatch }) => {
+const SidebarSubitems = ({ subitem, dispatch, handleDrawerClose }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
     return (
         <>
             <ListItem disablePadding divider>
@@ -16,6 +18,10 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
                     onClick={() => {
                         if (subitem.type !== "page") {
                             dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
+                        } else {
+                            if (isMobile) {
+                                handleDrawerClose()
+                            }
                         }
                     }}
                 >
@@ -65,7 +71,7 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
                         }}
                     >
                         {subitem.Subitems.map((subSubitem, index) => {
-                            return <SidebarSubitems key={index} dispatch={dispatch} subitem={subSubitem} />;
+                            return <SidebarSubitems handleDrawerClose={handleDrawerClose} key={index} dispatch={dispatch} subitem={subSubitem} />;
                         })}
                     </List>
                 ) : null}

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

@@ -10,7 +10,7 @@ import { headerMenu } from "@/core/utils/headerMenu";
 import SidebarMenu from "./Sidebar/SidebarMenu";
 
 const drawerWidth = 300;
-const headersHeight = 136;
+const headersHeight = 72;
 
 const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
     flexGrow: 1,
@@ -137,7 +137,7 @@ const HeaderWithSidebar = ({ children }) => {
                         <ChevronRightIcon />
                     </IconButton>
                 </DrawerHeader>
-                <SidebarMenu />
+                <SidebarMenu handleDrawerClose={handleDrawerClose} />
                 <Typography textAlign={"center"} variant="caption" sx={{ py: 0.2, fontFamily: "sans-serif" }}>
                     v{process.env.NEXT_PUBLIC_VERSION}
                 </Typography>