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>

src/core/utils/headerMenu.js

@@ -0,0 +1,80 @@
+export const headerMenu = [
+    {
+        title: 'تصادفات',
+        subMenu: [
+            [
+                {
+                    title: 'تصادفات روزانه',
+                    href: 'https://rms.witel.ir/v2/daily_accidents/create'
+                }
+            ]
+        ]
+    },
+    {
+        title: 'گزارش های جامع',
+        subMenu: [
+            [
+                {
+                    title: 'گزارش محوری',
+                    href: 'https://rms.witel.ir/v2/axis_reports'
+                },
+                {
+                    title: 'هوش تجاری (‌BI)',
+                    href: 'https://rms.witel.ir/v2/axis_reports'
+                }
+            ]
+        ]
+    },
+    {
+        title: 'زیرساخت و ناوگان',
+        subMenu: [
+            [
+                {
+                    title: 'پراکندگی بر روی نقشه راهدارخانه ها',
+                    href: 'https://rms.witel.ir/v2/map?type=rahdar'
+                },
+                {
+                    title: 'راهدارخانه ها',
+                    href: 'https://rms.witel.ir/v2/rahdari_points'
+                }
+            ],
+            [
+                {
+                    title: 'ممیزی ماشین آلات راهداری کشور',
+                    href: 'https://rms.witel.ir/cmms-audit'
+                }
+            ]
+        ]
+    },
+    {
+        title: 'سامانه های راهداری',
+        subMenu: [
+            [
+                {
+                    title: 'تحقیق و توسعه',
+                    href: 'https://rms.witel.ir/RandD'
+                },
+                {
+                    title: 'سامانه مدیریت یکپارچه زیرساخت های راه (PMS,BMS,SMS)',
+                    href: 'http://roadams.rmto.ir'
+                },
+                {
+                    title: 'سامانه مدیریت ناوگان (FMS)',
+                    href: 'http://fms.141.ir'
+                },
+                {
+                    title: 'سامانه جامع مدیریت سوانح و حوادث جاده ای',
+                    href: 'https://items.rmto.ir'
+                },
+                {
+                    title: 'سامانه مدیریت نگهداری ماشین آلات (CMMS)',
+                    href: 'https://cmms.rmto.ir/Login.aspx?ReturnUrl=%2f'
+                },
+                {
+                    title: 'درگاه کاتالوگ داده',
+                    href: 'https://roadams.rmto.ir:8080'
+                }
+            ]
+        ]
+    }
+]