Refactoring the menu opening and closing options to make it cleaner and adding the new Request forms menu item

Author: dr-bizz

src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx

@@ -129,25 +129,20 @@ const NavMenu: React.FC = () => {
       : 0;
   }, [loading]);
 
-  const [reportsMenuOpen, setReportsMenuOpen] = useState(false);
-  const [toolsMenuOpen, setToolsMenuOpen] = useState(false);
+  enum MenuId {
+    Reports = 'reports',
+    Tools = 'tools',
+    RequestForms = 'requestForms',
+  }
 
-  const handleReportsMenuToggle = () => {
-    setReportsMenuOpen((prevOpen) => !prevOpen);
-    handleToolsMenuClose();
-  };
-
-  const handleReportsMenuClose = () => {
-    setReportsMenuOpen(false);
-  };
+  const [openMenu, setOpenMenu] = useState<MenuId | null>(null);
 
-  const handleToolsMenuToggle = () => {
-    setToolsMenuOpen((prevOpen) => !prevOpen);
-    handleReportsMenuClose();
+  const handleMenuToggle = (menu: MenuId) => {
+    setOpenMenu((prev) => (prev === menu ? null : menu));
   };
 
-  const handleToolsMenuClose = () => {
-    setToolsMenuOpen(false);
+  const handleMenuClose = () => {
+    setOpenMenu(null);
   };
   const { pathname } = useRouter();
 
@@ -178,9 +173,9 @@ const NavMenu: React.FC = () => {
 
       <NavMenuDropdown
         page={navPages[3]}
-        menuOpen={reportsMenuOpen}
-        handleMenuToggle={handleReportsMenuToggle}
-        handleMenuClose={handleReportsMenuClose}
+        menuOpen={openMenu === MenuId.Reports}
+        handleMenuToggle={() => handleMenuToggle(MenuId.Reports)}
+        handleMenuClose={handleMenuClose}
         testId="ReportMenuToggle"
         sum={sum}
         toolData={toolData}
@@ -189,16 +184,28 @@ const NavMenu: React.FC = () => {
       />
       <NavMenuDropdown
         page={navPages[4]}
-        menuOpen={toolsMenuOpen}
-        handleMenuToggle={handleToolsMenuToggle}
-        handleMenuClose={handleToolsMenuClose}
+        menuOpen={openMenu === MenuId.Tools}
+        handleMenuToggle={() => handleMenuToggle(MenuId.Tools)}
+        handleMenuClose={handleMenuClose}
         testId="ToolsMenuToggle"
         sum={sum}
         toolData={toolData}
         loading={loading}
         isTool={true}
       />
 
+      <NavMenuDropdown
+        page={navPages[5]}
+        menuOpen={openMenu === MenuId.RequestForms}
+        handleMenuToggle={() => handleMenuToggle(MenuId.RequestForms)}
+        handleMenuClose={handleMenuClose}
+        testId="RequestFormsMenuToggle"
+        sum={sum}
+        toolData={toolData}
+        loading={loading}
+        isTool={false}
+      />
+
       {isCoaching && (
         <Grid item className={classes.navListItem}>
           <MenuItem