Merge pull request #7 from bcgov/feature/menu-hover

Show menu drawer on app menu hover when its on collapsed state
bcgov · Aug 6, 2024 · 54d960c · 54d960c
2 parents 8cb4195 + e5f70c3
commit 54d960c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 37 deletions.
diff --git a/compliance-web/src/components/Shared/CopyButton.tsx b/compliance-web/src/components/Shared/CopyButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { IconButton } from "@mui/material";
 import { FileCopy, FileCopyOutlined } from "@mui/icons-material";
 import { BCPalette } from "epic.theme";
@@ -13,7 +13,7 @@ const CopyButton = ({ ...props }) => {
     navigator.clipboard.writeText(text);
   };
 
-  const [hover, setHover] = React.useState<boolean>(false);
+  const [hover, setHover] = useState<boolean>(false);
 
   return (
     <IconButton

diff --git a/compliance-web/src/components/Shared/SideNav/MenuItemIconsList.tsx b/compliance-web/src/components/Shared/SideNav/MenuItemIconsList.tsx
@@ -1,41 +1,62 @@
 import { theme } from "@/styles/theme";
-import { ListItem, Box, List } from "@mui/material";
-import { Fragment } from "react/jsx-runtime";
+import { ListItem, Box, List, Drawer } from "@mui/material";
 import RouteItemsList, { RouteMenuItem } from "./RouteItemsList";
 import { useMenuStore } from "@/store/menuStore";
+import MenuItemsList from "./MenuItemsList";
+import { useState } from "react";
+import { APP_SIDE_NAV_WIDTH } from "@/utils/constants";
 
 export default function MenuItemIconsList() {
   const routeMenuItems: RouteMenuItem[] = RouteItemsList();
 
-  const { toggleMenu } = useMenuStore();
+  const { appHeaderHeight } = useMenuStore();
+
+  const [hoverMenu, setHoverMenu] = useState<boolean>(false);
 
   const renderMenuIcons = () => {
-    return routeMenuItems.map((route) => {
-      return (
-        <Fragment key={route.routeName}>
-          <ListItem
-            key={route.routeName}
-            onClick={() => toggleMenu(route.routeName)}
-            disablePadding
-            sx={{ cursor: "pointer" }}
-          >
-            <Box
-              sx={{
-                color: theme.palette.common.white,
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "1rem",
-              }}
-            >
-              {route.icon ?? route.icon}
-            </Box>
-          </ListItem>
-        </Fragment>
-      );
-    });
+    return routeMenuItems.map((route) => (
+      <ListItem
+        key={route.routeName}
+        onMouseEnter={() => setHoverMenu(true)}
+        disablePadding
+        sx={{ cursor: "pointer" }}
+      >
+        <Box
+          sx={{
+            color: theme.palette.common.white,
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "1rem",
+          }}
+        >
+          {route.icon ?? route.icon}
+        </Box>
+      </ListItem>
+    ));
   };
 
-  return <List>{renderMenuIcons()}</List>;
+  return (
+    <>
+      <List>{renderMenuIcons()}</List>
+      <Drawer
+        open={hoverMenu}
+        variant="persistent"
+        onMouseLeave={() => setHoverMenu(false)}
+        sx={{
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: APP_SIDE_NAV_WIDTH,
+            boxSizing: "border-box",
+            background: theme.palette.primary.main,
+            height: `calc(100vh - ${appHeaderHeight}px)`,
+            top: appHeaderHeight,
+          },
+        }}
+      >
+        <MenuItemsList />
+      </Drawer>
+    </>
+  );
 }
diff --git a/compliance-web/src/components/Shared/SideNav/SideNavBar.tsx b/compliance-web/src/components/Shared/SideNav/SideNavBar.tsx
@@ -5,6 +5,7 @@ import ExpandMenuButton from "./ExpandMenuButton";
 import MenuItemsList from "./MenuItemsList";
 import { AppConfig } from "@/utils/config";
 import MenuItemIconsList from "./MenuItemIconsList";
+import { APP_SIDE_NAV_WIDTH, APP_SIDE_NAV_WIDTH_COLLAPSED } from "@/utils/constants";
 
 export default function SideNavBar() {
   const { expandMenu } = useMenuStore();
@@ -16,7 +17,7 @@ export default function SideNavBar() {
       <Box
         sx={{
           bgcolor: theme.palette.primary.main,
-          width: expandMenu ? 260 : 68,
+          width: expandMenu ? APP_SIDE_NAV_WIDTH : APP_SIDE_NAV_WIDTH_COLLAPSED,
           height: "100%",
           display: "flex",
           flexDirection: "column",

diff --git a/compliance-web/src/routes/__root.tsx b/compliance-web/src/routes/__root.tsx
@@ -1,10 +1,11 @@
 import EAOAppBar from "@/components/Shared/Header/EAOAppBar";
 import PageNotFound from "@/components/Shared/PageNotFound";
 import SideNavBar from "@/components/Shared/SideNav/SideNavBar";
+import { useMenuStore } from "@/store/menuStore";
 import { Box } from "@mui/system";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import { useState, useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { AuthContextProps } from "react-oidc-context";
 
 type RouterContext = {
@@ -17,14 +18,16 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function Layout() {
-  const [headerHeight, setHeaderHeight] = useState(0);
+  const { appHeaderHeight, setAppHeaderHeight } =
+    useMenuStore();
+
   const appBarRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (appBarRef.current) {
-      setHeaderHeight(appBarRef.current.offsetHeight);
+      setAppHeaderHeight(appBarRef.current.offsetHeight);
     }
-  }, []);
+  }, [setAppHeaderHeight]);
 
   return (
     <>
@@ -33,7 +36,7 @@ function Layout() {
         sx={{
           display: "flex",
           overflow: "hidden",
-          height: `calc(100vh - ${headerHeight}px)`,
+          height: `calc(100vh - ${appHeaderHeight}px)`,
         }}
       >
         <SideNavBar />

diff --git a/compliance-web/src/store/menuStore.tsx b/compliance-web/src/store/menuStore.tsx
@@ -4,15 +4,18 @@ import { persist } from "zustand/middleware";
 interface MenuState {
   openMenus: { [key: string]: boolean };
   expandMenu: boolean;
+  appHeaderHeight: number;
   toggleMenu: (routeName: string) => void;
   toggleExpandMenu: () => void;
+  setAppHeaderHeight: (height: number) => void;
 }
 
 export const useMenuStore = create<MenuState>()(
   persist(
     (set) => ({
       openMenus: {},
       expandMenu: true,
+      appHeaderHeight: 0,
       toggleMenu: (routeName: string) => {
         set((state) => ({
           openMenus: {
@@ -26,6 +29,11 @@ export const useMenuStore = create<MenuState>()(
           expandMenu: !state.expandMenu,
         }));
       },
+      setAppHeaderHeight: (height: number) => {
+        set(() => ({
+          appHeaderHeight: height,
+        }));
+      }
     }),
     {
       name: "menu-storage", // name of the item in the storage

diff --git a/compliance-web/src/utils/constants.ts b/compliance-web/src/utils/constants.ts
@@ -1 +1,4 @@
 // App Constants should go here
+
+export const APP_SIDE_NAV_WIDTH = 260;
+export const APP_SIDE_NAV_WIDTH_COLLAPSED = 68;