From 0c7b336c63a0eefeb5424482d567fe44c9a40cd8 Mon Sep 17 00:00:00 2001 From: Johannes Date: Fri, 18 Aug 2023 08:44:16 +0200 Subject: [PATCH 01/20] feat(Menu): add MenuGroupSection component --- .changeset/short-donkeys-double.md | 6 +++ packages/admin/admin/src/index.ts | 1 + .../admin/admin/src/mui/menu/GroupSection.tsx | 45 +++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 .changeset/short-donkeys-double.md create mode 100644 packages/admin/admin/src/mui/menu/GroupSection.tsx diff --git a/.changeset/short-donkeys-double.md b/.changeset/short-donkeys-double.md new file mode 100644 index 0000000000..4421be53ca --- /dev/null +++ b/.changeset/short-donkeys-double.md @@ -0,0 +1,6 @@ +--- +"@comet/cms-admin": minor +"@comet/admin": minor +--- + +Add group section component for usage in menu diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 5737a70eff..792902931c 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -94,6 +94,7 @@ export { MasterLayoutClassKey } from "./mui/MasterLayout.styles"; export { MasterLayoutContext } from "./mui/MasterLayoutContext"; export { MenuCollapsibleItem, MenuCollapsibleItemClassKey, MenuCollapsibleItemProps, MenuLevel } from "./mui/menu/CollapsibleItem"; export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context"; +export { MenuGroupSection, MenuGroupSectionClassKey, MenuGroupSectionProps } from "./mui/menu/GroupSection"; export { MenuItem, MenuItemClassKey, MenuItemProps } from "./mui/menu/Item"; export { MenuItemAnchorLink } from "./mui/menu/ItemAnchorLink"; export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink"; diff --git a/packages/admin/admin/src/mui/menu/GroupSection.tsx b/packages/admin/admin/src/mui/menu/GroupSection.tsx new file mode 100644 index 0000000000..a9ef1f4d1b --- /dev/null +++ b/packages/admin/admin/src/mui/menu/GroupSection.tsx @@ -0,0 +1,45 @@ +import { Box, ComponentsOverrides, Theme, Typography } from "@mui/material"; +import { createStyles, WithStyles, withStyles } from "@mui/styles"; +import * as React from "react"; + +export type MenuGroupSectionClassKey = "root" | "sectionTitle"; + +const styles = (theme: Theme) => + createStyles({ + root: { marginTop: theme.spacing(8) }, + sectionTitle: { + fontWeight: theme.typography.fontWeightBold, + fontSize: 14, + lineHeight: "20px", + borderBottom: `1px solid ${theme.palette.grey[50]}`, + }, + }); + +export interface MenuGroupSectionProps { + title?: string; +} + +const GroupSection: React.FC & MenuGroupSectionProps>> = ({ title, children, classes }) => { + return ( + + theme.spacing(2)} px={(theme) => theme.spacing(4)}> + {title} + + {children} + + ); +}; + +export const MenuGroupSection = withStyles(styles, { name: "CometAdminMenuGroupSection" })(GroupSection); + +declare module "@mui/material/styles" { + interface ComponentNameToClassKey { + CometAdminMenuGroupSection: MenuGroupSectionClassKey; + } + + interface Components { + CometAdminMenuGroupSection?: { + styleOverrides?: ComponentsOverrides["CometAdminMenuGroupSection"]; + }; + } +} From ab4ed1c38dd2de70fcf67947dd0d47ec001b4979 Mon Sep 17 00:00:00 2001 From: Johannes Date: Fri, 18 Aug 2023 08:45:31 +0200 Subject: [PATCH 02/20] fix(Menu): CometAdminMenu spelled wrong --- packages/admin/admin/src/mui/menu/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/admin/admin/src/mui/menu/Menu.tsx b/packages/admin/admin/src/mui/menu/Menu.tsx index 4b632027ce..2e15835556 100644 --- a/packages/admin/admin/src/mui/menu/Menu.tsx +++ b/packages/admin/admin/src/mui/menu/Menu.tsx @@ -111,7 +111,7 @@ declare module "@mui/material/styles" { } interface Components { - CometAdminenu?: { + CometAdminMenu?: { defaultProps?: ComponentsPropsList["CometAdminMenu"]; styleOverrides?: ComponentsOverrides["CometAdminMenu"]; }; From d233db48088b7fa09ad4ebc34e819a270496790c Mon Sep 17 00:00:00 2001 From: Johannes Date: Fri, 18 Aug 2023 08:50:51 +0200 Subject: [PATCH 03/20] feat(demo): use MenuGroupSection component in MasterMenu --- demo/admin/src/common/MasterMenu.tsx | 118 +++++++++++++++------------ 1 file changed, 66 insertions(+), 52 deletions(-) diff --git a/demo/admin/src/common/MasterMenu.tsx b/demo/admin/src/common/MasterMenu.tsx index 4901c09cd1..642725a6fe 100644 --- a/demo/admin/src/common/MasterMenu.tsx +++ b/demo/admin/src/common/MasterMenu.tsx @@ -1,5 +1,6 @@ -import { Menu, MenuCollapsibleItem, MenuContext, MenuItemRouterLink, useWindowSize } from "@comet/admin"; +import { Menu, MenuCollapsibleItem, MenuContext, MenuGroupSection, MenuItemRouterLink, useWindowSize } from "@comet/admin"; import { Assets, Dashboard, Data, PageTree, Snips, Wrench } from "@comet/admin-icons"; +import { useContentScope } from "@comet/cms-admin"; import * as React from "react"; import { useIntl } from "react-intl"; import { useRouteMatch } from "react-router"; @@ -11,7 +12,7 @@ const MasterMenu: React.FC = () => { const windowSize = useWindowSize(); const intl = useIntl(); const match = useRouteMatch(); - + const { scope } = useContentScope(); const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth; // Open menu when changing to permanent variant and close when changing to temporary variant. @@ -23,65 +24,78 @@ const MasterMenu: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [location]); + const sectionScopeTitle = `${scope?.domain.charAt(0).toUpperCase() + scope?.domain.slice(1)} - ${scope?.language?.toUpperCase()}`; + return ( - } - to={`${match.url}/dashboard`} - /> - }> - + } + to={`${match.url}/dashboard`} /> - + }> + + + - }> - - - } - to={`${match.url}/assets`} - /> - }> - - - }> - + } + > + + + + }> + + + }> + } /> + } /> + } /> + + + } + to={`${match.url}/assets`} /> + }> + + + + } /> - - } - /> - }> - } /> - } /> - } /> - + ); }; From 48d43b736ecd83f48ec10f5682d18c9866e02dd6 Mon Sep 17 00:00:00 2001 From: Johannes Date: Fri, 18 Aug 2023 09:35:06 +0200 Subject: [PATCH 04/20] feat(stories): use MenuGroupSection component in Menu story fixup! feat(Menu): add MenuGroupSection component --- .../admin-stories/src/admin/mui/Menu.tsx | 41 +++++++++++-------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/admin/admin-stories/src/admin/mui/Menu.tsx b/packages/admin/admin-stories/src/admin/mui/Menu.tsx index 40d9919280..4665ddd91e 100644 --- a/packages/admin/admin-stories/src/admin/mui/Menu.tsx +++ b/packages/admin/admin-stories/src/admin/mui/Menu.tsx @@ -7,6 +7,7 @@ import { MasterLayout, Menu, MenuCollapsibleItem, + MenuGroupSection, MenuItemAnchorLink, MenuItemRouterLink, useWindowSize, @@ -26,24 +27,28 @@ const AppMenu: React.FC = () => { return ( - } to="/dashboard" /> - } to="/settings" /> - }> - - - - }> - - - - } - secondaryAction={} - /> + + } to="/dashboard" /> + }> + + + + }> + + + + + + } to="/settings" /> + } + secondaryAction={} + /> + ); }; From 8b1d9cd8ce2b6320089370f2555a52aa491b2cf7 Mon Sep 17 00:00:00 2001 From: Johannes Munker <56400587+jomunker@users.noreply.github.com> Date: Mon, 25 Sep 2023 12:49:28 +0200 Subject: [PATCH 05/20] feat(GroupSection): Make defaultProps overwritable Co-authored-by: Ricky James Smith --- packages/admin/admin/src/mui/menu/GroupSection.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/admin/admin/src/mui/menu/GroupSection.tsx b/packages/admin/admin/src/mui/menu/GroupSection.tsx index a9ef1f4d1b..001c2705b5 100644 --- a/packages/admin/admin/src/mui/menu/GroupSection.tsx +++ b/packages/admin/admin/src/mui/menu/GroupSection.tsx @@ -33,12 +33,17 @@ const GroupSection: React.FC & export const MenuGroupSection = withStyles(styles, { name: "CometAdminMenuGroupSection" })(GroupSection); declare module "@mui/material/styles" { + interface ComponentsPropsList { + CometAdminMenuGroupSection: MenuGroupSectionProps; + } + interface ComponentNameToClassKey { CometAdminMenuGroupSection: MenuGroupSectionClassKey; } interface Components { CometAdminMenuGroupSection?: { + defaultProps?: ComponentsPropsList["CometAdminMenuGroupSection"]; styleOverrides?: ComponentsOverrides["CometAdminMenuGroupSection"]; }; } From 44fc74dc76df90bfdfe9261c9dbd343582459786 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 25 Sep 2023 13:33:44 +0200 Subject: [PATCH 06/20] feat(GroupSection): use class instead of padding props --- packages/admin/admin/src/mui/menu/GroupSection.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/admin/admin/src/mui/menu/GroupSection.tsx b/packages/admin/admin/src/mui/menu/GroupSection.tsx index 001c2705b5..b0f0682ffe 100644 --- a/packages/admin/admin/src/mui/menu/GroupSection.tsx +++ b/packages/admin/admin/src/mui/menu/GroupSection.tsx @@ -12,6 +12,7 @@ const styles = (theme: Theme) => fontSize: 14, lineHeight: "20px", borderBottom: `1px solid ${theme.palette.grey[50]}`, + padding: theme.spacing(2, 4), }, }); @@ -22,7 +23,7 @@ export interface MenuGroupSectionProps { const GroupSection: React.FC & MenuGroupSectionProps>> = ({ title, children, classes }) => { return ( - theme.spacing(2)} px={(theme) => theme.spacing(4)}> + {title} {children} From a1cd1b097cbd3d0659a619d69ef2e214067edc00 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 25 Sep 2023 13:46:58 +0200 Subject: [PATCH 07/20] refactor(GroupSection): rename group section and all types to item group --- demo/admin/src/common/MasterMenu.tsx | 10 ++++---- .../admin-stories/src/admin/mui/Menu.tsx | 10 ++++---- packages/admin/admin/src/index.ts | 2 +- .../menu/{GroupSection.tsx => ItemGroup.tsx} | 24 +++++++++---------- 4 files changed, 23 insertions(+), 23 deletions(-) rename packages/admin/admin/src/mui/menu/{GroupSection.tsx => ItemGroup.tsx} (54%) diff --git a/demo/admin/src/common/MasterMenu.tsx b/demo/admin/src/common/MasterMenu.tsx index 642725a6fe..b3ef525ecb 100644 --- a/demo/admin/src/common/MasterMenu.tsx +++ b/demo/admin/src/common/MasterMenu.tsx @@ -1,4 +1,4 @@ -import { Menu, MenuCollapsibleItem, MenuContext, MenuGroupSection, MenuItemRouterLink, useWindowSize } from "@comet/admin"; +import { Menu, MenuCollapsibleItem, MenuContext, MenuItemGroup, MenuItemRouterLink, useWindowSize } from "@comet/admin"; import { Assets, Dashboard, Data, PageTree, Snips, Wrench } from "@comet/admin-icons"; import { useContentScope } from "@comet/cms-admin"; import * as React from "react"; @@ -28,7 +28,7 @@ const MasterMenu: React.FC = () => { return ( - + } @@ -69,8 +69,8 @@ const MasterMenu: React.FC = () => { } /> } /> - - + + } @@ -95,7 +95,7 @@ const MasterMenu: React.FC = () => { to={`${match.url}/component-demo`} icon={} /> - + ); }; diff --git a/packages/admin/admin-stories/src/admin/mui/Menu.tsx b/packages/admin/admin-stories/src/admin/mui/Menu.tsx index 4665ddd91e..71273bc7a0 100644 --- a/packages/admin/admin-stories/src/admin/mui/Menu.tsx +++ b/packages/admin/admin-stories/src/admin/mui/Menu.tsx @@ -7,8 +7,8 @@ import { MasterLayout, Menu, MenuCollapsibleItem, - MenuGroupSection, MenuItemAnchorLink, + MenuItemGroup, MenuItemRouterLink, useWindowSize, } from "@comet/admin"; @@ -27,7 +27,7 @@ const AppMenu: React.FC = () => { return ( - + } to="/dashboard" /> }> @@ -37,8 +37,8 @@ const AppMenu: React.FC = () => { - - + + } to="/settings" /> { icon={} secondaryAction={} /> - + ); }; diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 792902931c..207f2175dd 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -94,9 +94,9 @@ export { MasterLayoutClassKey } from "./mui/MasterLayout.styles"; export { MasterLayoutContext } from "./mui/MasterLayoutContext"; export { MenuCollapsibleItem, MenuCollapsibleItemClassKey, MenuCollapsibleItemProps, MenuLevel } from "./mui/menu/CollapsibleItem"; export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context"; -export { MenuGroupSection, MenuGroupSectionClassKey, MenuGroupSectionProps } from "./mui/menu/GroupSection"; export { MenuItem, MenuItemClassKey, MenuItemProps } from "./mui/menu/Item"; export { MenuItemAnchorLink } from "./mui/menu/ItemAnchorLink"; +export { MenuItemGroup, MenuItemGroupClassKey, MenuItemGroupProps } from "./mui/menu/ItemGroup"; export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink"; export { Menu, MenuProps } from "./mui/menu/Menu"; export { MenuClassKey, styles } from "./mui/menu/Menu.styles"; diff --git a/packages/admin/admin/src/mui/menu/GroupSection.tsx b/packages/admin/admin/src/mui/menu/ItemGroup.tsx similarity index 54% rename from packages/admin/admin/src/mui/menu/GroupSection.tsx rename to packages/admin/admin/src/mui/menu/ItemGroup.tsx index b0f0682ffe..deb392c646 100644 --- a/packages/admin/admin/src/mui/menu/GroupSection.tsx +++ b/packages/admin/admin/src/mui/menu/ItemGroup.tsx @@ -2,12 +2,12 @@ import { Box, ComponentsOverrides, Theme, Typography } from "@mui/material"; import { createStyles, WithStyles, withStyles } from "@mui/styles"; import * as React from "react"; -export type MenuGroupSectionClassKey = "root" | "sectionTitle"; +export type MenuItemGroupClassKey = "root" | "groupTitle"; const styles = (theme: Theme) => - createStyles({ + createStyles({ root: { marginTop: theme.spacing(8) }, - sectionTitle: { + groupTitle: { fontWeight: theme.typography.fontWeightBold, fontSize: 14, lineHeight: "20px", @@ -16,14 +16,14 @@ const styles = (theme: Theme) => }, }); -export interface MenuGroupSectionProps { +export interface MenuItemGroupProps { title?: string; } -const GroupSection: React.FC & MenuGroupSectionProps>> = ({ title, children, classes }) => { +const ItemGroup: React.FC & MenuItemGroupProps>> = ({ title, children, classes }) => { return ( - + {title} {children} @@ -31,21 +31,21 @@ const GroupSection: React.FC & ); }; -export const MenuGroupSection = withStyles(styles, { name: "CometAdminMenuGroupSection" })(GroupSection); +export const MenuItemGroup = withStyles(styles, { name: "CometAdminMenuItemGroup" })(ItemGroup); declare module "@mui/material/styles" { interface ComponentsPropsList { - CometAdminMenuGroupSection: MenuGroupSectionProps; + CometAdminMenuItemGroup: MenuItemGroupProps; } interface ComponentNameToClassKey { - CometAdminMenuGroupSection: MenuGroupSectionClassKey; + CometAdminMenuItemGroup: MenuItemGroupClassKey; } interface Components { - CometAdminMenuGroupSection?: { - defaultProps?: ComponentsPropsList["CometAdminMenuGroupSection"]; - styleOverrides?: ComponentsOverrides["CometAdminMenuGroupSection"]; + CometAdminMenuItemGroup?: { + defaultProps?: ComponentsPropsList["CometAdminMenuItemGroup"]; + styleOverrides?: ComponentsOverrides["CometAdminMenuItemGroup"]; }; } } From 57ba18ac3b763dd5271b7999ac39b1212dc4adc1 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 21 Aug 2023 08:53:49 +0200 Subject: [PATCH 08/20] feat(GroupSection): show initials of group title if drawer closed --- demo/admin/src/common/MasterMenu.tsx | 4 +- .../admin/admin/src/mui/menu/ItemGroup.tsx | 47 +++++++++++++++---- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/demo/admin/src/common/MasterMenu.tsx b/demo/admin/src/common/MasterMenu.tsx index d01fc6f101..b9b7b0b158 100644 --- a/demo/admin/src/common/MasterMenu.tsx +++ b/demo/admin/src/common/MasterMenu.tsx @@ -28,7 +28,7 @@ const MasterMenu: React.FC = () => { return ( - + } @@ -71,7 +71,7 @@ const MasterMenu: React.FC = () => { } /> - + } diff --git a/packages/admin/admin/src/mui/menu/ItemGroup.tsx b/packages/admin/admin/src/mui/menu/ItemGroup.tsx index deb392c646..a44cd13db3 100644 --- a/packages/admin/admin/src/mui/menu/ItemGroup.tsx +++ b/packages/admin/admin/src/mui/menu/ItemGroup.tsx @@ -1,31 +1,60 @@ -import { Box, ComponentsOverrides, Theme, Typography } from "@mui/material"; +import { Box, ComponentsOverrides, Theme, Tooltip, Typography } from "@mui/material"; import { createStyles, WithStyles, withStyles } from "@mui/styles"; import * as React from "react"; -export type MenuItemGroupClassKey = "root" | "groupTitle"; +export type MenuItemGroupClassKey = "root" | "groupTitleContainer" | "groupTitle"; const styles = (theme: Theme) => createStyles({ root: { marginTop: theme.spacing(8) }, groupTitle: { fontWeight: theme.typography.fontWeightBold, - fontSize: 14, + fontSize: ({ drawerOpen }) => (drawerOpen ? 14 : 12), + border: ({ drawerOpen }) => (drawerOpen ? `2px solid ${theme.palette.common.white}` : `2px solid ${theme.palette.grey[100]}`), + borderRadius: ({ drawerOpen }) => (drawerOpen ? "initial" : 20), + padding: ({ drawerOpen }) => (drawerOpen ? "0" : theme.spacing(2, 4)), lineHeight: "20px", + color: ({ drawerOpen }) => (drawerOpen ? `${theme.palette.common.black}` : `${theme.palette.grey[300]}`), + }, + groupTitleContainer: { borderBottom: `1px solid ${theme.palette.grey[50]}`, - padding: theme.spacing(2, 4), + display: "flex", + justifyContent: ({ drawerOpen }) => (drawerOpen ? "flex-start" : "center"), + padding: ({ drawerOpen }) => `${theme.spacing(2)} ${drawerOpen ? theme.spacing(4) : 0}`, }, }); export interface MenuItemGroupProps { - title?: string; + title: string; + drawerOpen?: boolean; } -const ItemGroup: React.FC & MenuItemGroupProps>> = ({ title, children, classes }) => { +const ItemGroup: React.FC & MenuItemGroupProps>> = ({ title, children, classes, drawerOpen }) => { + const initialTitle = title; + function getInitials(title: string) { + const words = title.split(/\s+/).filter((word) => word.match(/[A-Za-z]/)); + return words.map((word) => word[0].toUpperCase()).join(""); + } + + if (drawerOpen === false) { + title = getInitials(title); + } + return ( - - {title} - + + + + {title} + + + {children} ); From 845885847ebc7a0369c8edbc32bf0a38c3fc3028 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 21 Aug 2023 11:25:14 +0200 Subject: [PATCH 09/20] feat(MenuItem): only show text if drawer open --- demo/admin/src/common/MasterMenu.tsx | 20 +++++++++++++++---- .../admin/src/mui/menu/CollapsibleItem.tsx | 2 ++ packages/admin/admin/src/mui/menu/Item.tsx | 6 ++++-- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/demo/admin/src/common/MasterMenu.tsx b/demo/admin/src/common/MasterMenu.tsx index b9b7b0b158..6f3fde92d1 100644 --- a/demo/admin/src/common/MasterMenu.tsx +++ b/demo/admin/src/common/MasterMenu.tsx @@ -30,11 +30,16 @@ const MasterMenu: React.FC = () => { } to={`${match.url}/dashboard`} /> - }> + } + > { } > @@ -58,13 +64,17 @@ const MasterMenu: React.FC = () => { /> - }> + } + > - }> + }> } /> } /> } /> @@ -73,11 +83,12 @@ const MasterMenu: React.FC = () => { } to={`${match.url}/assets`} /> - }> + }> { /> } diff --git a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx b/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx index 8dd2e8a4ae..d6f8e7d675 100644 --- a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx +++ b/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx @@ -45,6 +45,7 @@ const CollapsibleItem: React.FC & MenuCollapsibleItemP level, primary, secondary, + showText = true, icon, openByDefault = false, openedIcon = , @@ -79,6 +80,7 @@ const CollapsibleItem: React.FC & MenuCollapsibleItemP
> & { component?: React.ElementType }; @@ -114,6 +115,7 @@ const Item: React.FC & MenuItemProps & MuiListItemProp icon, level = 1, secondaryAction, + showText = true, ...otherProps }) => { const context = React.useContext(MenuContext); @@ -131,8 +133,8 @@ const Item: React.FC & MenuItemProps & MuiListItemProp return ( - {hasIcon && {icon}} - + {hasIcon && {icon}} + {showText && } {!!secondaryAction && secondaryAction} ); From 8af75c2747aeeb9efdad4099344a594575226836 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 21 Aug 2023 14:11:26 +0200 Subject: [PATCH 10/20] feat(Menu): keep icons in collapsed permanent menu variant --- .../admin/admin/src/mui/menu/Menu.styles.ts | 104 ++++++++++-------- packages/admin/admin/src/mui/menu/Menu.tsx | 26 ++--- 2 files changed, 69 insertions(+), 61 deletions(-) diff --git a/packages/admin/admin/src/mui/menu/Menu.styles.ts b/packages/admin/admin/src/mui/menu/Menu.styles.ts index 52336ac2bb..0b7f4d67e7 100644 --- 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 & Pick> = styled( + MuiDrawer, + { shouldForwardProp: (prop) => prop !== "drawerWidth" && prop !== "drawerWidthCollapsed" }, +) & Pick>( + ({ theme, open, variant, drawerWidth, drawerWidthCollapsed }) => { + const { headerHeight } = React.useContext(MasterLayoutContext); -export const styles = (theme: Theme) => - createStyles({ - 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({ + 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 index 2e15835556..e6df9714dc 100644 --- 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 & MenuProps> = ({ classes, children, - drawerWidth = 300, + drawerWidth = DRAWER_WIDTH, + drawerWidthCollapsed = DRAWER_WIDTH_COLLAPSED, variant = "permanent", temporaryDrawerProps = {}, permanentDrawerProps = {}, @@ -29,7 +33,6 @@ const MenuDrawer: React.FC & 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 & MenuProps> = ({ <> @@ -78,17 +82,13 @@ const MenuDrawer: React.FC & MenuProps> = ({