fix: 修复更新到 mui-v5 后，菜单折叠失效的问题。
This commit is contained in:
parent
218a6c4c3a
commit
fcd72690d5
@ -1,10 +1,10 @@
|
|||||||
import React, { FC } from "react";
|
import React, { FC } from "react";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { useTheme, Theme } from "@mui/material/styles";
|
import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles";
|
||||||
import createStyles from '@mui/styles/createStyles';
|
import createStyles from "@mui/styles/createStyles";
|
||||||
import makeStyles from '@mui/styles/makeStyles';
|
import makeStyles from "@mui/styles/makeStyles";
|
||||||
import Drawer from "@mui/material/Drawer";
|
import Drawer from "@mui/material/Drawer";
|
||||||
import AppBar from "@mui/material/AppBar";
|
import AppBar, { AppBarProps } from "@mui/material/AppBar";
|
||||||
import Toolbar from "@mui/material/Toolbar";
|
import Toolbar from "@mui/material/Toolbar";
|
||||||
import List from "@mui/material/List";
|
import List from "@mui/material/List";
|
||||||
import CssBaseline from "@mui/material/CssBaseline";
|
import CssBaseline from "@mui/material/CssBaseline";
|
||||||
@ -17,76 +17,83 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|||||||
import ListItem from "@mui/material/ListItem";
|
import ListItem from "@mui/material/ListItem";
|
||||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
import ListItemText from "@mui/material/ListItemText";
|
import ListItemText from "@mui/material/ListItemText";
|
||||||
import { AddCircle, Description, LocalOffer } from '@mui/icons-material';
|
import { AddCircle, Description, LocalOffer } from "@mui/icons-material";
|
||||||
import { Link } from '@curi/react-dom';
|
import { Link } from "@curi/react-dom";
|
||||||
|
import { Box } from "@mui/system";
|
||||||
const drawerWidth = 240;
|
const drawerWidth = 240;
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const openedMixin = (theme: Theme): CSSObject => ({
|
||||||
createStyles({
|
width: drawerWidth,
|
||||||
root: {
|
transition: theme.transitions.create("width", {
|
||||||
display: "flex",
|
easing: theme.transitions.easing.sharp,
|
||||||
},
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
appBar: {
|
}),
|
||||||
zIndex: theme.zIndex.drawer + 1,
|
overflowX: "hidden",
|
||||||
transition: theme.transitions.create(["width", "margin"], {
|
});
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.leavingScreen,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
appBarShift: {
|
|
||||||
marginLeft: drawerWidth,
|
|
||||||
width: `calc(100% - ${drawerWidth}px)`,
|
|
||||||
transition: theme.transitions.create(["width", "margin"], {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.enteringScreen,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
menuButton: {
|
|
||||||
marginRight: 36,
|
|
||||||
},
|
|
||||||
hide: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
drawer: {
|
|
||||||
width: drawerWidth,
|
|
||||||
flexShrink: 0,
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
},
|
|
||||||
drawerOpen: {
|
|
||||||
width: drawerWidth,
|
|
||||||
transition: theme.transitions.create("width", {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.enteringScreen,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
drawerClose: {
|
|
||||||
transition: theme.transitions.create("width", {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.leavingScreen,
|
|
||||||
}),
|
|
||||||
overflowX: "hidden",
|
|
||||||
width: theme.spacing(7) + 1,
|
|
||||||
[theme.breakpoints.up("sm")]: {
|
|
||||||
width: theme.spacing(9) + 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
padding: theme.spacing(0, 1),
|
|
||||||
// necessary for content to be below app bar
|
|
||||||
...theme.mixins.toolbar,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flexGrow: 1,
|
|
||||||
padding: theme.spacing(3),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
export const DefaultLayout: FC = ({children}) => {
|
const closedMixin = (theme: Theme): CSSObject => ({
|
||||||
const classes = useStyles();
|
transition: theme.transitions.create("width", {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
overflowX: "hidden",
|
||||||
|
width: `calc(${theme.spacing(7)} + 1px)`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const DrawerHeader = styled("div")(({ theme }) => ({
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
padding: theme.spacing(0, 1),
|
||||||
|
// necessary for content to be below app bar
|
||||||
|
...theme.mixins.toolbar,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Main = styled("main")(({ theme }) => ({
|
||||||
|
padding: theme.spacing(2, 2),
|
||||||
|
[theme.breakpoints.up("md")]: {
|
||||||
|
padding: theme.spacing(4, 3),
|
||||||
|
},
|
||||||
|
width: "100%",
|
||||||
|
marginTop: theme.mixins.toolbar.minHeight,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledAppBar = styled(AppBar, {
|
||||||
|
shouldForwardProp: (prop) => prop !== "open",
|
||||||
|
})<AppBarProps & { open?: boolean }>(({ theme, open }) => ({
|
||||||
|
zIndex: theme.zIndex.drawer + 1,
|
||||||
|
transition: theme.transitions.create(["width", "margin"], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
...(open && {
|
||||||
|
marginLeft: drawerWidth,
|
||||||
|
width: `calc(100% - ${drawerWidth}px)`,
|
||||||
|
transition: theme.transitions.create(["width", "margin"], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledDrawer = styled(Drawer, {
|
||||||
|
shouldForwardProp: (prop) => prop !== "open",
|
||||||
|
})(({ theme, open }) => ({
|
||||||
|
width: drawerWidth,
|
||||||
|
flexShrink: 0,
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
...(open && {
|
||||||
|
...openedMixin(theme),
|
||||||
|
"& .MuiDrawer-paper": openedMixin(theme),
|
||||||
|
}),
|
||||||
|
...(!open && {
|
||||||
|
...closedMixin(theme),
|
||||||
|
"& .MuiDrawer-paper": closedMixin(theme),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const DefaultLayout: FC = ({ children }) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
@ -99,86 +106,68 @@ export const DefaultLayout: FC = ({children}) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<Box sx={{ display: "flex" }}>
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
<AppBar
|
<StyledAppBar position="fixed" open={open}>
|
||||||
position="fixed"
|
<Toolbar>
|
||||||
className={clsx(classes.appBar, {
|
<IconButton
|
||||||
[classes.appBarShift]: open,
|
color="inherit"
|
||||||
})}
|
aria-label="open drawer"
|
||||||
>
|
onClick={handleDrawerOpen}
|
||||||
<Toolbar>
|
edge="start"
|
||||||
<IconButton
|
sx={{
|
||||||
color="inherit"
|
marginRight: "36px",
|
||||||
aria-label="open drawer"
|
...(open && { display: "none" }),
|
||||||
onClick={handleDrawerOpen}
|
}}
|
||||||
edge="start"
|
size="large"
|
||||||
className={clsx(classes.menuButton, {
|
>
|
||||||
[classes.hide]: open,
|
<MenuIcon />
|
||||||
})}
|
</IconButton>
|
||||||
size="large">
|
<Typography variant="h6" noWrap>
|
||||||
<MenuIcon />
|
Mini variant drawer
|
||||||
</IconButton>
|
</Typography>
|
||||||
<Typography variant="h6" noWrap>
|
</Toolbar>
|
||||||
Mini variant drawer
|
</StyledAppBar>
|
||||||
</Typography>
|
<StyledDrawer variant="permanent" open={open}>
|
||||||
</Toolbar>
|
<DrawerHeader>
|
||||||
</AppBar>
|
<IconButton onClick={handleDrawerClose} size="large">
|
||||||
<Drawer
|
{theme.direction === "rtl" ? (
|
||||||
variant="permanent"
|
<ChevronRightIcon />
|
||||||
className={clsx(classes.drawer, {
|
) : (
|
||||||
[classes.drawerOpen]: open,
|
<ChevronLeftIcon />
|
||||||
[classes.drawerClose]: !open,
|
)}
|
||||||
})}
|
</IconButton>
|
||||||
classes={{
|
</DrawerHeader>
|
||||||
paper: clsx({
|
<Divider />
|
||||||
[classes.drawerOpen]: open,
|
<List>
|
||||||
[classes.drawerClose]: !open,
|
<Link name="create-article">
|
||||||
}),
|
<ListItem button>
|
||||||
}}
|
<ListItemIcon>
|
||||||
>
|
<AddCircle />
|
||||||
<div className={classes.toolbar}>
|
</ListItemIcon>
|
||||||
<IconButton onClick={handleDrawerClose} size="large">
|
<ListItemText primary="New Article" />
|
||||||
{theme.direction === "rtl" ? (
|
</ListItem>
|
||||||
<ChevronRightIcon />
|
</Link>
|
||||||
) : (
|
<Link name="articles">
|
||||||
<ChevronLeftIcon />
|
<ListItem button>
|
||||||
)}
|
<ListItemIcon>
|
||||||
</IconButton>
|
<Description />
|
||||||
</div>
|
</ListItemIcon>
|
||||||
<Divider />
|
<ListItemText primary="Articles" />
|
||||||
<List>
|
</ListItem>
|
||||||
<Link name="create-article">
|
</Link>
|
||||||
<ListItem button>
|
<Link name="tags">
|
||||||
<ListItemIcon>
|
<ListItem button>
|
||||||
<AddCircle />
|
<ListItemIcon>
|
||||||
</ListItemIcon>
|
<LocalOffer />
|
||||||
<ListItemText primary="New Article" />
|
</ListItemIcon>
|
||||||
</ListItem>
|
<ListItemText primary="Tags" />
|
||||||
</Link>
|
</ListItem>
|
||||||
<Link name="articles">
|
</Link>
|
||||||
<ListItem button>
|
</List>
|
||||||
<ListItemIcon>
|
<Divider />
|
||||||
<Description />
|
</StyledDrawer>
|
||||||
</ListItemIcon>
|
<Main>{children}</Main>
|
||||||
<ListItemText primary="Articles" />
|
</Box>
|
||||||
</ListItem>
|
|
||||||
</Link>
|
|
||||||
<Link name="tags">
|
|
||||||
<ListItem button>
|
|
||||||
<ListItemIcon>
|
|
||||||
<LocalOffer />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Tags" />
|
|
||||||
</ListItem>
|
|
||||||
</Link>
|
|
||||||
</List>
|
|
||||||
<Divider />
|
|
||||||
</Drawer>
|
|
||||||
<main className={classes.content}>
|
|
||||||
<div className={classes.toolbar} />
|
|
||||||
{ children }
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user