formatting
This commit is contained in:
@@ -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}
|
||||
alignItems={"center"}
|
||||
direction={"row"}
|
||||
spacing={2}
|
||||
>
|
||||
<Image alt="" priority src={RmsLogo.src} width={50} height={54} />
|
||||
<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>
|
||||
<Stack spacing={4} alignItems={"center"} direction={"row"}>
|
||||
<Image alt="" priority src={RmsLogo.src} width={50} height={54} />
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
@@ -1,11 +1,9 @@
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import HeaderTop from "./HaederTop";
|
||||
import { Stack } from "@mui/material";
|
||||
import HeaderBottom from "./HaederBottom";
|
||||
|
||||
const HeaderWithLogo = () => {
|
||||
return (
|
||||
<Stack sx={{ width: "100%", position: "fixed", zIndex: 1200, background: "#fff" }}>
|
||||
<HeaderTop />
|
||||
<HeaderBottom />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -54,16 +54,16 @@ function reducer(state, action) {
|
||||
return state.map((item) =>
|
||||
item.hasSubitems
|
||||
? {
|
||||
...item,
|
||||
Subitems: item.Subitems.map((subitem) =>
|
||||
subitem.hasSubitems
|
||||
? {
|
||||
...subitem,
|
||||
Subitems: toggleSubitems(subitem.Subitems, action.id),
|
||||
}
|
||||
: subitem
|
||||
),
|
||||
}
|
||||
...item,
|
||||
Subitems: item.Subitems.map((subitem) =>
|
||||
subitem.hasSubitems
|
||||
? {
|
||||
...subitem,
|
||||
Subitems: toggleSubitems(subitem.Subitems, action.id),
|
||||
}
|
||||
: 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>
|
||||
)}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user