Collapsed menu hover effect

.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.

.gitignore

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

demo/admin/src/common/MasterMenu.tsx

@@ -2,19 +2,28 @@ import { Menu, MenuCollapsibleItem, MenuContext, MenuItemGroup, MenuItemRouterLi
 import { Assets, Dashboard, Data, PageTree, Snips, Wrench } from "@comet/admin-icons";
 import { useContentScope } from "@comet/cms-admin";
 import * as React from "react";
+import { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useRouteMatch } from "react-router";
 
 const permanentMenuMinWidth = 1024;
 
 const MasterMenu: React.FC = () => {
-    const { open, toggleOpen } = React.useContext(MenuContext);
+    const { open, toggleOpen, setDrawerVariant, drawerVariant } = React.useContext(MenuContext);
     const windowSize = useWindowSize();
     const intl = useIntl();
     const match = useRouteMatch();
-    const { scope } = useContentScope();
+    const { scope, values } = useContentScope();
     const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth;
 
+    useEffect(() => {
+        if (useTemporaryMenu) {
+            setDrawerVariant("temporary");
+        } else {
+            setDrawerVariant("permanent");
+        }
+    }, [setDrawerVariant, useTemporaryMenu]);
+
     // Open menu when changing to permanent variant and close when changing to temporary variant.
     React.useEffect(() => {
         if ((useTemporaryMenu && open) || (!useTemporaryMenu && !open)) {
@@ -24,10 +33,12 @@ 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 sectionScopeTitle = `${scope?.domain.charAt(0).toUpperCase() + scope?.domain.slice(1)} - ${
+        values.language[0].label ?? scope?.language?.toUpperCase()
+    }`;
 
     return (
-        <Menu variant={useTemporaryMenu ? "temporary" : "permanent"}>
+        <Menu variant={drawerVariant}>
             <MenuItemGroup title={sectionScopeTitle}>
                 <MenuItemRouterLink
                     primary={intl.formatMessage({ id: "menu.dashboard", defaultMessage: "Dashboard" })}

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

@@ -36,6 +36,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">
@@ -84,6 +88,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/src/index.ts

@@ -101,7 +101,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,68 @@
+import { Theme } from "@mui/material";
+import { createStyles } from "@mui/styles";
+
+import { MenuCollapsibleItemProps } from "./CollapsibleItem";
+
+export type MenuCollapsibleItemClassKey =
+    | "root"
+    | "childSelected"
+    | "listItem"
+    | "open"
+    | "collapsedMenuParentTitle"
+    | "itemTitle"
+    | "collapsibleIcon"
+    | "colorGrey"
+    | "colorWhite"
+    | "collapsibleOpen";
+
+export const styles = (theme: Theme) =>
+    createStyles<MenuCollapsibleItemClassKey, MenuCollapsibleItemProps>({
+        root: {},
+        childSelected: {
+            color: theme.palette.primary.main,
+            "& $listItem": {
+                "& [class*='MuiListItemText-root']": {
+                    color: theme.palette.primary.main,
+                    "& [class*='MuiListItemText-primary']": {
+                        fontWeight: ({ level }) => level === 2 || (level === 3 && theme.typography.fontWeightBold),
+                    },
+                },
+                "& [class*='MuiListItemIcon-root']": {
+                    color: theme.palette.primary.main,
+                },
+            },
+            "& [class*='MuiListItemIcon-root']": {
+                color: theme.palette.primary.main,
+            },
+        },
+        collapsedMenuParentTitle: {
+            backgroundColor: ({ level, isMenuOpen, isCollapsibleOpen }) =>
+                level === 1 && !isMenuOpen && isCollapsibleOpen ? theme.palette.primary.main : theme.palette.grey[50],
+        },
+        itemTitle: {
+            fontWeight: theme.typography.fontWeightBold,
+            fontSize: 12,
+            padding: "15px 15px 20px 15px",
+            lineHeight: "16px",
+            color: theme.palette.grey[500],
+        },
+        collapsibleOpen: {
+            backgroundColor: ({ isMenuOpen }) => (!isMenuOpen ? theme.palette.primary.main : undefined),
+            color: ({ isMenuOpen }) => (!isMenuOpen ? `${theme.palette.common.white} !important` : undefined),
+            "& [class*='MuiListItemIcon-root']": {
+                color: ({ isMenuOpen }) => (!isMenuOpen ? `${theme.palette.common.white} !important` : undefined),
+            },
+        },
+        collapsibleIcon: {
+            fontSize: 12,
+            color: theme.palette.grey[200],
+        },
+        colorGrey: {
+            color: theme.palette.grey[200],
+        },
+        colorWhite: {
+            color: theme.palette.common.white,
+        },
+        listItem: {},
+        open: {},
+    });