feat(Menu): keep icons in collapsed permanent menu variant

vivid-planet · Sep 27, 2023 · 8af75c2 · 8af75c2
1 parent 8458858
commit 8af75c2
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 61 deletions.
diff --git a/packages/admin/admin/src/mui/menu/Menu.styles.ts b/packages/admin/admin/src/mui/menu/Menu.styles.ts
@@ -1,58 +1,66 @@
-import { Theme } from "@mui/material";
-import { createStyles } from "@mui/styles";
+import { CSSObject, Drawer as MuiDrawer, DrawerProps, Theme } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { createStyles, StyledComponent } from "@mui/styles";
+import { MUIStyledCommonProps } from "@mui/system";
+import * as React from "react";
 
-import { MenuProps } from "./Menu";
+import { MasterLayoutContext } from "../MasterLayoutContext";
+import { DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED, MenuProps } from "./Menu";
 
-export type MenuClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed";
+const openedMixin = (theme: Theme, drawerWidth?: number): CSSObject => ({
+    width: drawerWidth ?? DRAWER_WIDTH,
+    transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+    overflowX: "hidden",
+});
+const closedMixin = (theme: Theme, drawerVariant: DrawerProps["variant"], drawerWidth?: number, drawerWidthCollapsed?: number): CSSObject => ({
+    width: drawerVariant === "temporary" ? drawerWidth ?? DRAWER_WIDTH : drawerWidthCollapsed ?? DRAWER_WIDTH_COLLAPSED,
+    transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: "hidden",
+});
+export const Drawer: StyledComponent<DrawerProps & MUIStyledCommonProps<Theme> & Pick<MenuProps, "drawerWidth" | "drawerWidthCollapsed">> = styled(
+    MuiDrawer,
+    { shouldForwardProp: (prop) => prop !== "drawerWidth" && prop !== "drawerWidthCollapsed" },
+)<DrawerProps & MUIStyledCommonProps<Theme> & Pick<MenuProps, "drawerWidth" | "drawerWidthCollapsed">>(
+    ({ theme, open, variant, drawerWidth, drawerWidthCollapsed }) => {
+        const { headerHeight } = React.useContext(MasterLayoutContext);
 
-export const styles = (theme: Theme) =>
-    createStyles<MenuClassKey, MenuProps>({
-        drawer: {
-            "& [class*='MuiDrawer-paper']": {
-                backgroundColor: "#fff",
-            },
-            "& [class*='MuiPaper-root']": {
-                flexGrow: 1,
-                overflowX: "hidden",
+        return {
+            ...(variant === "permanent" && {
+                backgroundColor: theme.palette.common.white,
+                flexShrink: 0,
+                whiteSpace: "nowrap",
+                boxSizing: "border-box",
+                ...(open ? openedMixin(theme, drawerWidth) : closedMixin(theme, variant, drawerWidth, drawerWidthCollapsed)),
+            }),
+            "& .MuiDrawer-paper": {
+                backgroundColor: theme.palette.common.white,
+                ...(variant === "permanent" && {
+                    top: headerHeight,
+                    height: `calc(100% - ${headerHeight}px)`,
+                }),
+                ...(open ? openedMixin(theme, drawerWidth) : closedMixin(theme, variant, drawerWidth, drawerWidthCollapsed)),
             },
-            "& [class*='MuiDrawer-paperAnchorLeft']": {
+            "& .MuiDrawer-paperAnchorLeft": {
                 borderRight: "none",
             },
-            "&$permanent": {
-                "&$open": {
-                    transition: theme.transitions.create("width", {
-                        easing: theme.transitions.easing.sharp,
-                        duration: theme.transitions.duration.enteringScreen,
-                    }),
-                    "& [class*='MuiPaper-root']": {
-                        transition: theme.transitions.create("margin", {
-                            easing: theme.transitions.easing.sharp,
-                            duration: theme.transitions.duration.leavingScreen,
-                        }),
-                    },
-                },
-                "&$closed": {
-                    transition: theme.transitions.create("width", {
-                        easing: theme.transitions.easing.easeOut,
-                        duration: theme.transitions.duration.leavingScreen,
-                    }),
-                    "& [class*='MuiPaper-root']": {
-                        transition: theme.transitions.create("margin", {
-                            easing: theme.transitions.easing.easeOut,
-                            duration: theme.transitions.duration.enteringScreen,
-                        }),
-                    },
-                },
-            },
-        },
+        };
+    },
+);
+
+export type MenuClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed";
+
+export const styles = () => {
+    return createStyles<MenuClassKey, MenuProps>({
+        drawer: {},
         permanent: {},
         temporary: {},
         open: {},
-        closed: {
-            "&$permanent": {
-                "& [class*='MuiPaper']": {
-                    boxShadow: "none",
-                },
-            },
-        },
+        closed: {},
     });
+};
diff --git a/packages/admin/admin/src/mui/menu/Menu.tsx b/packages/admin/admin/src/mui/menu/Menu.tsx
@@ -1,16 +1,19 @@
-import { ComponentsOverrides, Drawer, DrawerProps, PaperProps, Theme } from "@mui/material";
+import { ComponentsOverrides, DrawerProps, PaperProps, Theme } from "@mui/material";
 import { WithStyles, withStyles } from "@mui/styles";
 import * as React from "react";
 import { useHistory } from "react-router";
 
-import { MasterLayoutContext } from "../MasterLayoutContext";
 import { MenuContext } from "./Context";
-import { MenuClassKey, styles } from "./Menu.styles";
+import { Drawer, MenuClassKey, styles } from "./Menu.styles";
+
+export const DRAWER_WIDTH = 300;
+export const DRAWER_WIDTH_COLLAPSED = 60;
 
 export interface MenuProps {
     children: React.ReactNode;
     variant?: "permanent" | "temporary";
     drawerWidth?: number;
+    drawerWidthCollapsed?: number;
     temporaryDrawerProps?: DrawerProps;
     permanentDrawerProps?: DrawerProps;
     temporaryDrawerPaperProps?: PaperProps;
@@ -20,7 +23,8 @@ export interface MenuProps {
 const MenuDrawer: React.FC<WithStyles<typeof styles> & MenuProps> = ({
     classes,
     children,
-    drawerWidth = 300,
+    drawerWidth = DRAWER_WIDTH,
+    drawerWidthCollapsed = DRAWER_WIDTH_COLLAPSED,
     variant = "permanent",
     temporaryDrawerProps = {},
     permanentDrawerProps = {},
@@ -29,7 +33,6 @@ const MenuDrawer: React.FC<WithStyles<typeof styles> & MenuProps> = ({
 }) => {
     const history = useHistory();
     const { open, toggleOpen } = React.useContext(MenuContext);
-    const { headerHeight } = React.useContext(MasterLayoutContext);
     const initialRender = React.useRef(true);
 
     // Close the menu on initial render if it is temporary to prevent a page-overlay when initially loading the page.
@@ -66,10 +69,11 @@ const MenuDrawer: React.FC<WithStyles<typeof styles> & MenuProps> = ({
         <>
             <Drawer
                 variant="temporary"
+                drawerWidth={drawerWidth}
                 className={temporaryDrawerClasses.join(" ")}
                 // workaround for issue: https://github.com/mui/material-ui/issues/35793
                 open={initialRender.current ? false : temporaryOpen}
-                PaperProps={{ style: { width: drawerWidth }, ...temporaryDrawerPaperProps }}
+                PaperProps={{ ...temporaryDrawerPaperProps }}
                 onClose={toggleOpen}
                 {...temporaryDrawerProps}
             >
@@ -78,17 +82,13 @@ const MenuDrawer: React.FC<WithStyles<typeof styles> & MenuProps> = ({
 
             <Drawer
                 variant="permanent"
+                drawerWidth={drawerWidth}
+                drawerWidthCollapsed={drawerWidthCollapsed}
                 className={permanentDrawerClasses.join(" ")}
                 open={permanentOpen}
-                style={{ width: permanentOpen ? drawerWidth : 0 }}
+                hidden={variant === "temporary"}
                 PaperProps={{
                     elevation: 2,
-                    style: {
-                        top: headerHeight,
-                        height: `calc(100% - ${headerHeight}px)`,
-                        width: drawerWidth,
-                        marginLeft: permanentOpen ? 0 : -drawerWidth,
-                    },
                     ...permanentDrawerPaperProps,
                 }}
                 {...permanentDrawerProps}