RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-08 15:45:39 +03:30
parent 20a0b2984c
commit 6288ac926c
14 changed files with 853 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layouts/dashboard/headerWithLogo/HaederBottom/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
"use client";
import { Stack, Typography } from "@mui/material";
import Image from "next/image";
const HeaderBottom = () => {
return (
<Stack
sx={{
px: 2,
py: 1,
background: (theme) => theme.palette.primary2.main,
}}
spacing={4}
alignItems={"center"}
direction={"row"}
>
<Image
alt=""
priority
src={"/images/rmsLogo.svg"}
width={65}
height={71}
/>
<Stack alignItems={"center"} spacing={1}>
<Typography
variant="h5"
sx={{ color: (theme) => theme.palette.primary2.contrastText }}
>
سامانه جامع راهداری
</Typography>
<Typography
sx={{ color: (theme) => theme.palette.primary2.contrastText }}
>
rms.rmto.ir
</Typography>
</Stack>
</Stack>
);
};
export default HeaderBottom;

17
src/components/layouts/dashboard/headerWithLogo/HaederTop/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
import { Stack } from "@mui/material";
import Image from "next/image";
const HeaderTop = () => {
return (
<Stack sx={{ p: 2 }}>
<Image
alt=""
priority
src={"/images/headerLogo.png"}
width={190}
height={44}
/>
</Stack>
);
};
export default HeaderTop;

18
src/components/layouts/dashboard/headerWithLogo/index.jsx
View File

@@ -1,9 +1,13 @@
import {Box, Stack} from "@mui/material";
import { Box, Stack } from "@mui/material";
import HeaderTop from "./HaederTop";
import HeaderBottom from "./HaederBottom";
const HeaderWithLogo = () => {
return (<Stack>
<Box>header1</Box>
<Box>header2</Box>
</Stack>)
}
export default HeaderWithLogo
return (
<Stack>
<HeaderTop />
<HeaderBottom />
</Stack>
);
};
export default HeaderWithLogo;

4
src/components/layouts/dashboard/headerWithSidebar/HeaderMenu/index.jsx Normal file
View File

@@ -0,0 +1,4 @@
const HeaderMenu = () => {
return <>منو</>;
};
export default HeaderMenu;

186
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -1,94 +1,116 @@
'use client'
import {useState} from "react";
import {Box, Drawer, IconButton, Paper, styled, Toolbar, Typography} from "@mui/material";
import MuiAppBar from '@mui/material/AppBar';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
"use client";
import SidebarMenu from "@/core/components/SidebarMenu";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@mui/icons-material/Menu";
import { Box, Drawer, IconButton, Paper, styled, Toolbar } from "@mui/material";
import MuiAppBar from "@mui/material/AppBar";
import { useState } from "react";
import HeaderMenu from "./HeaderMenu";
const drawerWidth = 260;
const drawerWidth = 300;
const Main = styled(Paper, {shouldForwardProp: (prop) => prop !== 'open'})(({theme, open}) => ({
flexGrow: 1, transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
}), marginLeft: `-${drawerWidth}px`, ...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
}), marginLeft: 0,
const Main = styled(Paper, { shouldForwardProp: (prop) => prop !== "open" })(
({ theme, open }) => ({
flexGrow: 1,
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}),);
marginLeft: `-${drawerWidth}px`,
...(open && {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
})
);
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({theme, open}) => ({
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
}), ...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
}),
shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const DrawerHeader = styled('div')(({theme}) => ({
display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar
...theme.mixins.toolbar, justifyContent: 'flex-end',
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
justifyContent: "flex-end",
}));
const HeaderWithSidebar = ({children}) => {
const [open, setOpen] = useState(false);
const HeaderWithSidebar = ({ children }) => {
const [open, setOpen] = useState(true);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (<Box sx={{display: 'flex'}}>
<AppBar sx={{position: 'fixed', top: "unset"}} elevation={0} open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{mr: 2, ...(open && {display: 'none'})}}
>
<MenuIcon/>
</IconButton>
<Typography variant="h6" noWrap component="div">
menu
</Typography>
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth, flexShrink: 0, '& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
borderTop: 1,
borderTopColor: 'divider',
top: "unset"
},
}}
variant="persistent"
anchor="left"
open={open}
>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
<ChevronRightIcon/>
</IconButton>
</DrawerHeader>
<SidebarMenu />
</Drawer>
<Main elevation={0} open={open}>
<DrawerHeader/>
{children}
</Main>
</Box>)
}
export default HeaderWithSidebar
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<Box sx={{ display: "flex" }}>
<AppBar
sx={{ position: "fixed", top: "unset" }}
elevation={0}
open={open}
>
<Toolbar variant="dense">
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{ mr: 2, ...(open && { display: "none" }) }}
>
<MenuIcon />
</IconButton>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
<HeaderMenu />
</Box>
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
borderTop: 1,
borderTopColor: "divider",
top: "unset",
},
}}
variant="persistent"
anchor="left"
open={open}
>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
<ChevronRightIcon />
</IconButton>
</DrawerHeader>
<SidebarMenu />
</Drawer>
<Main elevation={0} open={open}>
<DrawerHeader />
{children}
</Main>
</Box>
);
};
export default HeaderWithSidebar;