From fcd72690d5c29df1928ffb7d0ccd8cd4b912cd61 Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Thu, 25 Nov 2021 22:36:25 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=88=B0=20mui-v5=20=E5=90=8E=EF=BC=8C=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/default.tsx | 295 +++++++++++++++++++--------------------- 1 file changed, 142 insertions(+), 153 deletions(-) diff --git a/src/layouts/default.tsx b/src/layouts/default.tsx index f76bd13..9e39d56 100644 --- a/src/layouts/default.tsx +++ b/src/layouts/default.tsx @@ -1,10 +1,10 @@ import React, { FC } from "react"; import clsx from "clsx"; -import { useTheme, Theme } from "@mui/material/styles"; -import createStyles from '@mui/styles/createStyles'; -import makeStyles from '@mui/styles/makeStyles'; +import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import makeStyles from "@mui/styles/makeStyles"; 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 List from "@mui/material/List"; import CssBaseline from "@mui/material/CssBaseline"; @@ -17,76 +17,83 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ListItem from "@mui/material/ListItem"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; -import { AddCircle, Description, LocalOffer } from '@mui/icons-material'; -import { Link } from '@curi/react-dom'; +import { AddCircle, Description, LocalOffer } from "@mui/icons-material"; +import { Link } from "@curi/react-dom"; +import { Box } from "@mui/system"; const drawerWidth = 240; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: "flex", - }, - appBar: { - zIndex: theme.zIndex.drawer + 1, - 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), - }, - }) -); +const openedMixin = (theme: Theme): CSSObject => ({ + width: drawerWidth, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + overflowX: "hidden", +}); -export const DefaultLayout: FC = ({children}) => { - const classes = useStyles(); +const closedMixin = (theme: Theme): CSSObject => ({ + 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", +})(({ 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 [open, setOpen] = React.useState(false); @@ -99,86 +106,68 @@ export const DefaultLayout: FC = ({children}) => { }; return ( -
- - - - - - - - Mini variant drawer - - - - -
- - {theme.direction === "rtl" ? ( - - ) : ( - - )} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- { children } -
-
+ + + + + + + + + Mini variant drawer + + + + + + + {theme.direction === "rtl" ? ( + + ) : ( + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{children}
+ ); -} +};