formatting

This commit is contained in:
AmirHossein Mahmoodi
2025-05-18 16:00:19 +03:30
parent c75b65a378
commit 642a3a48d7
7 changed files with 58 additions and 45 deletions

View File

@@ -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>
);

View File

@@ -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;

View File

@@ -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>
);

View File

@@ -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}

View File

@@ -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>
)}

View File

@@ -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}

View File

@@ -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>