Collapsed menu hover effect (#1240)

This PR adds the hover functionality for the collapsed menu.

---------

Co-authored-by: Ricky James Smith <jamesricky@me.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

.changeset/chatty-walls-study.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Add hover effect for collapsed menu icons. This ensures that navigation is also possible in collapsed state.

.changeset/eight-rules-laugh.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Change type of props `openedIcon` and `closedIcon` of `MenuCollapsibleItem` to `React.JSXElementConstructor<SvgIconProps>`
+
+Reason being, the icons need to be called as JSX element to be able to dynamically add classes.

.gitignore

@@ -9,4 +9,3 @@ lang/
 .pnp.*
 junit.xml
 .env.local
-/.idea/**

demo/admin/src/common/MasterMenu.tsx

@@ -1,19 +1,20 @@
 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 { capitalize } from "@mui/material";
 import * as React from "react";
 import { useIntl } from "react-intl";
 import { useRouteMatch } from "react-router";
 
-const permanentMenuMinWidth = 1024;
+const PERMANENT_MENU_MIN_WIDTH = 1024;
 
 const MasterMenu: React.FC = () => {
     const { open, toggleOpen } = React.useContext(MenuContext);
     const windowSize = useWindowSize();
     const intl = useIntl();
     const match = useRouteMatch();
-    const { scope } = useContentScope();
-    const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth;
+    const { scope, values } = useContentScope();
+    const useTemporaryMenu: boolean = windowSize.width < PERMANENT_MENU_MIN_WIDTH;
 
     // Open menu when changing to permanent variant and close when changing to temporary variant.
     React.useEffect(() => {
@@ -24,7 +25,10 @@ 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()}`;
+    const scopeLangLabel = values.language.find(({ value }) => value === scope?.language)?.label;
+    const capitalizedScopeDomain = capitalize(scope?.domain);
+    const scopeLang = scopeLangLabel ?? scope?.language?.toUpperCase();
+    const sectionScopeTitle = `${capitalizedScopeDomain} - ${scopeLang}`;
 
     return (
         <Menu variant={useTemporaryMenu ? "temporary" : "permanent"}>

packages/admin/admin-stories/src/admin/mui/Menu.tsx

@@ -37,6 +37,10 @@ const AppMenu: React.FC = () => {
                 <MenuCollapsibleItem primary="Even More Items" icon={<Sort />}>
                     <MenuItemRouterLink primary="Foo3" to="/foo3" />
                     <MenuItemRouterLink primary="Foo4" to="/foo4" />
+                    <MenuCollapsibleItem primary="Wow there can be even more">
+                        <MenuItemRouterLink primary="Foo5" to="/foo5" />
+                        <MenuItemRouterLink primary="Foo6" to="/foo6" />
+                    </MenuCollapsibleItem>
                 </MenuCollapsibleItem>
             </MenuItemGroup>
             <MenuItemGroup title="Further Layers">
@@ -90,6 +94,8 @@ export const Story: React.FC = () => (
             <Route path="/foo2" render={() => <Content>Foo 2</Content>} />
             <Route path="/foo3" render={() => <Content>Foo 3</Content>} />
             <Route path="/foo4" render={() => <Content>Foo 4</Content>} />
+            <Route path="/foo5" render={() => <Content>Foo 5</Content>} />
+            <Route path="/foo6" render={() => <Content>Foo 6</Content>} />
         </Switch>
     </MasterLayout>
 );

packages/admin/admin-theme/src/typographyOptions.ts

@@ -3,10 +3,13 @@ import { TypographyOptions } from "@mui/material/styles/createTypography";
 const fontFamily = "Roboto, Helvetica, Arial, sans-serif";
 
 export const fontWeights = {
-    fontWeightLight: 100,
-    fontWeightRegular: 300,
-    fontWeightMedium: 400,
-    fontWeightBold: 500,
+    fontWeightThin: 100,
+    fontWeightExtraLight: 200,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightSemiBold: 600,
+    fontWeightBold: 700,
 };
 
 export const typographyOptions: TypographyOptions = {
@@ -59,4 +62,17 @@ export const typographyOptions: TypographyOptions = {
         lineHeight: "20px",
         fontWeight: fontWeights.fontWeightRegular,
     },
+    subtitle2: {
+        fontFamily,
+        fontSize: 14,
+        lineHeight: "20px",
+        fontWeight: fontWeights.fontWeightSemiBold,
+    },
+    overline: {
+        fontFamily,
+        fontSize: 12,
+        lineHeight: "16px",
+        fontWeight: fontWeights.fontWeightSemiBold,
+        letterSpacing: 0,
+    },
 };

packages/admin/admin/src/index.ts

@@ -102,7 +102,8 @@ export { MainContent, MainContentClassKey, MainContentProps } from "./mui/MainCo
 export { MasterLayout, MasterLayoutProps } from "./mui/MasterLayout";
 export { MasterLayoutClassKey } from "./mui/MasterLayout.styles";
 export { MasterLayoutContext } from "./mui/MasterLayoutContext";
-export { MenuCollapsibleItem, MenuCollapsibleItemClassKey, MenuCollapsibleItemProps, MenuLevel } from "./mui/menu/CollapsibleItem";
+export { MenuCollapsibleItem, MenuCollapsibleItemProps, MenuLevel } from "./mui/menu/CollapsibleItem";
+export { MenuCollapsibleItemClassKey } from "./mui/menu/CollapsibleItem.styles";
 export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context";
 export { MenuItem, MenuItemProps } from "./mui/menu/Item";
 export { MenuItemClassKey } from "./mui/menu/Item.styles";

packages/admin/admin/src/mui/MasterLayout.tsx

@@ -28,13 +28,14 @@ function MasterLayoutComponent({
     headerHeight = 60,
 }: MasterLayoutProps & WithStyles<typeof styles>) {
     const [open, setOpen] = React.useState(openMenuByDefault);
+    const [drawerVariant, setDrawerVariant] = React.useState<"permanent" | "temporary">("permanent");
 
     const toggleOpen = () => {
         setOpen(!open);
     };
 
     return (
-        <MenuContext.Provider value={{ open, toggleOpen }}>
+        <MenuContext.Provider value={{ open, toggleOpen, drawerVariant, setDrawerVariant }}>
             <MasterLayoutContext.Provider value={{ headerHeight }}>
                 <CssBaseline />
                 <div className={classes.root}>

packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts

@@ -0,0 +1,55 @@
+import { Theme } from "@mui/material";
+import { createStyles } from "@mui/styles";
+
+import { MenuCollapsibleItemProps } from "./CollapsibleItem";
+
+export type MenuCollapsibleItemClassKey =
+    | "root"
+    | "childSelected"
+    | "listItem"
+    | "open"
+    | "itemTitle"
+    | "collapsibleIcon"
+    | "collapsibleIconColorGrey"
+    | "collapsibleIconColorWhite";
+
+export const styles = (theme: Theme) =>
+    createStyles<MenuCollapsibleItemClassKey, MenuCollapsibleItemProps>({
+        root: {},
+        childSelected: {
+            color: theme.palette.primary.main,
+            fontWeight: theme.typography.fontWeightMedium,
+            "& $listItem": {
+                "& [class*='MuiListItemText-root']": {
+                    color: theme.palette.primary.main,
+                    "& [class*='MuiListItemText-primary']": {
+                        fontWeight: ({ level }) => (level === 2 || level === 3) && 600,
+                    },
+                },
+                "& [class*='MuiListItemIcon-root']": {
+                    color: theme.palette.primary.main,
+                },
+            },
+            "& [class*='MuiListItemIcon-root']": {
+                color: theme.palette.primary.main,
+            },
+        },
+        itemTitle: {
+            fontWeight: 600,
+            fontSize: 12,
+            padding: "20px 15px 20px 15px",
+            lineHeight: "16px",
+            color: theme.palette.grey[500],
+        },
+        collapsibleIcon: {
+            fontSize: ({ isMenuOpen, level }) => (isMenuOpen || level === 2 || level === 3 ? 16 : 12),
+        },
+        collapsibleIconColorWhite: {
+            color: theme.palette.common.white,
+        },
+        collapsibleIconColorGrey: {
+            color: ({ isMenuOpen, level }) => (isMenuOpen || level === 2 || level === 3 ? theme.palette.grey[900] : theme.palette.grey[200]),
+        },
+        listItem: {},
+        open: {},
+    });