add header menu

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

@@ -1,4 +1,53 @@
-const HeaderMenu = () => {
-    return <>منو</>;
+import { ExpandLess, ExpandMore, Link } from "@mui/icons-material";
+import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
+import NextLink from "next/link";
+import { useState } from "react";
+
+const HeaderMenu = ({ menu }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Button
+                color="inherit"
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={handleClick}
+                endIcon={open ? <ExpandLess /> : <ExpandMore />}
+            >
+                {menu.title}
+            </Button>
+            <Menu
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+            >
+                {menu.subMenu.map((subMenu, index) => (
+                    <>
+                        {subMenu.map(sub => (
+
+                            <MenuItem component={NextLink} href={sub.href} key={sub.title} onClick={handleClose}>
+                                <ListItemIcon>
+                                    <Link fontSize="small" />
+                                </ListItemIcon>
+                                <ListItemText>{sub.title}</ListItemText>
+                            </MenuItem>
+                        ))}
+                        {menu.subMenu.length - 1 !== index && (
+                            <Divider />
+                        )}
+                    </>
+                ))}
+            </Menu>
+        </>
+    );
 };
 export default HeaderMenu;

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

@@ -6,6 +6,7 @@ import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography } from "@mu
 import MuiAppBar from "@mui/material/AppBar";
 import { useState } from "react";
 import HeaderMenu from "./HeaderMenu";
+import { headerMenu } from "@/core/utils/headerMenu";
 
 const drawerWidth = 300;
 
@@ -75,7 +76,7 @@ const HeaderWithSidebar = ({ children }) => {
                         <MenuIcon />
                     </IconButton>
                     <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
-                        <HeaderMenu />
+                        {headerMenu.map(menu => <HeaderMenu key={menu.title} menu={menu} />)}
                     </Box>
                 </Toolbar>
             </AppBar>