Feature/fixe bugs

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

@@ -1,5 +1,5 @@
 import { ExpandLess, ExpandMore, Link } from "@mui/icons-material";
-import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
+import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Stack } from "@mui/material";
 import NextLink from "next/link";
 import { useState } from "react";
 
@@ -15,7 +15,7 @@ const HeaderMenu = ({ menu }) => {
     };
 
     return (
-        <>
+        <Stack sx={{ mr: 0.5 }}>
             <Button
                 color="inherit"
                 aria-haspopup="true"
@@ -38,7 +38,7 @@ const HeaderMenu = ({ menu }) => {
                     index < menu.subMenu.length - 1 && <Divider key={`divider-${index}`} />,
                 ])}
             </Menu>
-        </>
+        </Stack>
     );
 };
 

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

@@ -1,9 +1,9 @@
 "use client";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material";
+import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import HeaderMenu from "./HeaderMenu";
 import moment from "jalali-moment";
 import { headerMenu } from "@/core/utils/headerMenu";
@@ -56,7 +56,14 @@ const DrawerHeader = styled("div")(({ theme }) => ({
 }));
 
 const HeaderWithSidebar = ({ children }) => {
-    const [open, setOpen] = useState(true);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("md")); // Detect mobile/tablet screen
+    const [open, setOpen] = useState(!isMobile); // Initial state based on screen size
+
+    useEffect(() => {
+        setOpen(!isMobile); // Toggle state when screen size changes
+    }, [isMobile]);
+
     const now = moment().locale("fa").format("YYYY/MM/DD");
 
     const handleDrawerOpen = () => {
@@ -65,6 +72,7 @@ const HeaderWithSidebar = ({ children }) => {
     const handleDrawerClose = () => {
         setOpen(false);
     };
+
     return (
         <Box
             sx={{
@@ -85,7 +93,18 @@ const HeaderWithSidebar = ({ children }) => {
                     >
                         <MenuIcon />
                     </IconButton>
-                    <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+                    <Box
+                        sx={{
+                            flexGrow: 1,
+                            display: "flex",
+                            overflowX: "auto",
+                            whiteSpace: "nowrap",
+                            scrollbarWidth: "none",
+                            "&::-webkit-scrollbar": {
+                                display: "none",
+                            },
+                        }}
+                    >
                         {headerMenu.map((menu) => (
                             <HeaderMenu key={menu.title} menu={menu} />
                         ))}
@@ -132,4 +151,5 @@ const HeaderWithSidebar = ({ children }) => {
         </Box>
     );
 };
+
 export default HeaderWithSidebar;