add isOpen to directory menu state

iqbal-14 · Mar 24, 2022 · a4e55d4 · a4e55d4
1 parent 6ce9cd4
commit a4e55d4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/src/atoms/directoryMenuAtom.ts b/src/atoms/directoryMenuAtom.ts
@@ -9,11 +9,19 @@ export type DirectoryMenuItem = {
   iconColor: string;
 };
 
-export const defaultMenuItem: DirectoryMenuItem = {
-  displayText: "Home",
-  link: "/",
-  icon: TiHome,
-  iconColor: "black",
+interface DirectoryMenuState {
+  isOpen: boolean;
+  selectedMenuItem: DirectoryMenuItem;
+}
+
+export const defaultMenuItem: DirectoryMenuState = {
+  isOpen: false,
+  selectedMenuItem: {
+    displayText: "Home",
+    link: "/",
+    icon: TiHome,
+    iconColor: "black",
+  },
 };
 
 export const directoryMenuState = atom({

diff --git a/src/components/Navbar/Directory/index.tsx b/src/components/Navbar/Directory/index.tsx
@@ -16,10 +16,10 @@ const Directory: React.FC = () => {
   const [open, setOpen] = useState(false);
   const handleClose = () => setOpen(false);
 
-  const { directoryState } = useDirectory();
+  const { directoryState, toggleMenuOpen } = useDirectory();
 
   return (
-    <Menu>
+    <Menu isOpen={directoryState.isOpen}>
       {({ isOpen }) => (
         <>
           <MenuButton
@@ -29,6 +29,7 @@ const Directory: React.FC = () => {
             _hover={{ outline: "1px solid", outlineColor: "gray.200" }}
             mr={2}
             ml={{ base: 0, md: 2 }}
+            onClick={toggleMenuOpen}
           >
             <Flex
               alignItems="center"
@@ -40,15 +41,17 @@ const Directory: React.FC = () => {
                   <Icon
                     fontSize={24}
                     mr={{ base: 1, md: 2 }}
-                    color={directoryState.iconColor}
-                    as={directoryState.icon}
+                    color={directoryState.selectedMenuItem.iconColor}
+                    as={directoryState.selectedMenuItem.icon}
                   />
                   <Box
                     display={{ base: "none", lg: "flex" }}
                     flexDirection="column"
                     fontSize="10pt"
                   >
-                    <Text fontWeight={600}>{directoryState.displayText}</Text>
+                    <Text fontWeight={600}>
+                      {directoryState.selectedMenuItem.displayText}
+                    </Text>
                   </Box>
                 </>
               </Flex>

diff --git a/src/hooks/useDirectory.ts b/src/hooks/useDirectory.ts
@@ -18,29 +18,42 @@ const useDirectory = () => {
 
   const onSelectMenuItem = (menuItem: DirectoryMenuItem) => {
     // setState here
-    setDirectoryState(menuItem);
+    setDirectoryState((prev) => ({
+      ...prev,
+      selectedMenuItem: menuItem,
+    }));
     router.push(menuItem.link);
   };
 
+  const toggleMenuOpen = () => {
+    setDirectoryState((prev) => ({
+      ...prev,
+      isOpen: !directoryState.isOpen,
+    }));
+  };
+
   useEffect(() => {
     const { community } = router.query;
 
     const existingCommunity =
       communityStateValue.visitedCommunities[community as string];
 
     if (existingCommunity) {
-      setDirectoryState({
-        displayText: `r/${existingCommunity.id}`,
-        link: `r/${existingCommunity.id}`,
-        icon: FaReddit,
-        iconColor: "blue.500",
-      });
+      setDirectoryState((prev) => ({
+        ...prev,
+        selectedMenuItem: {
+          displayText: `r/${existingCommunity.id}`,
+          link: `r/${existingCommunity.id}`,
+          icon: FaReddit,
+          iconColor: "blue.500",
+        },
+      }));
       return;
     }
     setDirectoryState(defaultMenuItem);
   }, [router.query?.community, communityStateValue.visitedCommunities]);
 
-  return { directoryState, onSelectMenuItem };
+  return { directoryState, onSelectMenuItem, toggleMenuOpen };
 };
 
 export default useDirectory;