PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

адаптация для меню

Browse Source
This commit is contained in:
Tamara 2023-01-10 05:27:03 +03:00
parent 095701ab32
commit 3176fdb21c
1 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/pages/dashboard/Menu/index.tsx
View File

@ -27,6 +27,7 @@ import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import Header from "../Header/index";
import {Link} from 'react-router-dom';
import useMediaQuery from '@mui/material/useMediaQuery';
import Paper from "@mui/material/Paper";
const drawerWidth = 240;
@ -112,34 +113,77 @@ const links: {path: string; element: JSX.Element; title: string} [] =[
]
const Menu: React.FC = () => {
const matches = useMediaQuery('(min-width:600px)');
React.useEffect(() => {
if (matches) {
handleDrawerOpen()
} else {
handleDrawerClose()
const Navigation = (props:any) => {
return (
<List
sx={{
background: '#2f3339'
}}
>
{links.map((e, i) => (
<ListItem disablePadding sx={{ display: 'block' }}>
<Link key={i} to={e.path} style={{textDecoration: 'none'}}>
<ListItemButton onClick={props.SladeMobileHC}
sx={{
minHeight: 48,
height: '50px',
justifyContent: props.visible ? 'initial' : 'center',
px: 2.5,
margin: '20px 0'
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: props.visible ? 3 : 'auto',
justifyContent: 'center',
color: '#eaba5b',
transform: 'scale(1.2)'
}}
>
{e.element}
</ListItemIcon>
<ListItemText primary={e.title}
sx={{
opacity: props.visible ? 1 : 0,
color: '#eaba5b',
}} />
</ListItemButton>
</Link>
</ListItem>
))}
</List>
)
}
}, [matches])
const Menu: React.FC = () => {
const tablet = useMediaQuery('(max-width:600px)');
const mobile = useMediaQuery('(max-width:340px)');
const theme = useTheme();
const [open, setOpen] = React.useState(true);
const [open, setOpen] = React.useState(tablet? false : true);
const handleDrawerOpen = () => {
setOpen(true);
if (!mobile) {setOpen(true)}
else {SladeMobileHC()}
};
const handleDrawerClose = () => {
setOpen(false);
};
const [sladeMobile, setSladeMobile] = React.useState(false)
const SladeMobileHC = () => {
if (mobile) {setSladeMobile(old=>!old)}
};
return (
<React.Fragment>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<AppBar open={open}>
<Toolbar
sx={{
background: '#2f3339',
@ -163,56 +207,36 @@ const Menu: React.FC = () => {
<Header />
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
{!mobile ? <Drawer variant="permanent" open={open}>
<DrawerHeader style={{minHeight: '86px',}}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
<IconButton onClick={handleDrawerClose} sx={{color: "#eaba5b"}}>
<ChevronLeftIcon />
</IconButton>
</DrawerHeader>
<Divider />
<List
sx={{
background: '#2f3339'
}}
>
{links.map((e, i) => (
<ListItem disablePadding sx={{ display: 'block' }}>
<Link key={i} to={e.path} style={{textDecoration: 'none'}}>
<ListItemButton
sx={{
minHeight: 48,
height: '50px',
justifyContent: open ? 'initial' : 'center',
px: 2.5,
margin: '20px 0'
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 : 'auto',
justifyContent: 'center',
color: '#eaba5b',
transform: 'scale(1.2)'
}}
>
{e.element}
</ListItemIcon>
<ListItemText primary={e.title}
sx={{
opacity: open ? 1 : 0,
color: '#eaba5b',
}} />
</ListItemButton>
</Link>
</ListItem>
))}
</List>
</Drawer>
<Navigation visible={open}/>
</Drawer> : null}
</Box>
{sladeMobile ? <Paper
sx={{
position: 'absolute',
width: '100%',
background: '#2f3339',
zIndex: theme.zIndex.drawer + 3
}}
>
<Box
sx={{display: 'flex',
justifyContent: 'end',
padding: '10px'
}}
>
<IconButton onClick={SladeMobileHC} sx={{color: "#eaba5b"}}>
<ChevronLeftIcon />
</IconButton>
</Box>
<Divider />
<Navigation visible={true} SladeMobileHC={SladeMobileHC}/></Paper> : null}
</React.Fragment>
);
}