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;