Added dropdown in mobile navigation

asyncapi · Oct 29, 2023 · 6657fb2 · 6657fb2
1 parent fb3676e
commit 6657fb2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/components/navigation/MenuBlocks.js b/components/navigation/MenuBlocks.js
@@ -1,12 +1,20 @@
+import { useState, useEffect, useRef } from 'react';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label'
 import Link from 'next/link'
 
 export default function MenuBlocks ({
   items = [],
 }) {
+  const [height, setHeight] = useState(0);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    setHeight(contentRef.current.clientHeight);
+  }, []);
   return (
-    <>
+    <div className="transition-height duration-700 ease-in-out overflow-hidden" style={{ height: height }}>
+      <div ref={contentRef}>
       {
         items.map((item, index) => {
           const isExternalHref = item.href && item.href.startsWith('http');
@@ -33,6 +41,7 @@ export default function MenuBlocks ({
           )
         })
       }
-    </>
+    </div>
+    </div>
   )
 }
diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
@@ -6,8 +6,18 @@ import toolingItems from './toolingItems';
 import communityItems from './communityItems';
 import otherItems from './otherItems';
 import Link from 'next/link';
+import NavItemDropdown from '../icons/NavItemDropdown';
+import { useState } from 'react';
 
 export default function MobileNavMenu({ onClickClose = () => {} }) {
+  const [open, setOpen] = useState();
+  function showMenu(menu) {
+    if (open === menu) {
+      setOpen(null)
+      return;
+    }
+    setOpen(menu);
+  }
   return (
     <div className="fixed top-0 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
       <div className="rounded-lg shadow-lg">
@@ -60,37 +70,33 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
                 </button>
               </div>
             </div>
-            <div className="py-2 space-y-2">
-              <Link href="/docs" className="flex">
-                <h4 className="text-gray-500 font-medium block mb-4">
-                  <a className="cursor-pointer" data-testid="MobileNav-docs">Docs</a>
-                </h4>
-              </Link>
-              <MenuBlocks items={learningItems} />
+          </div>
+          <div className="py-2 px-5 space-y-2" onClick={() => showMenu('learning')}>
+              <h4 className="text-gray-800 font-medium flex justify-between">
+                <a className="cursor-pointer">Docs</a>
+                <NavItemDropdown />
+              </h4>
+              {open === 'learning' && <MenuBlocks items={learningItems} />}
             </div>
+          <div className="py-2 px-5 space-y-2" onClick={() => showMenu('tooling')}>
+            <h4 className="text-gray-800 font-medium flex justify-between"> <a className="cursor-pointer">Tools</a> <NavItemDropdown /> </h4>
+            {open === 'tooling' && <MenuBlocks items={toolingItems} />}
           </div>
-          <div className="py-2 px-5 space-y-2">
-            <Link href="/tools" 
-            className="flex">
-              <h4 className="text-gray-500 font-medium block mb-4"> <a className="cursor-pointer" data-testid="MobileNav-tools" >Tools</a></h4>
-            </Link>
-              <MenuBlocks items={toolingItems} />
+          <div className="py-2 px-5 space-y-2" onClick={() => showMenu('community')}>
+            <h4 className="text-gray-800 font-medium flex justify-between"><a className="cursor-pointer">Community</a><NavItemDropdown /></h4>
+            {open === 'community' && <MenuBlocks items={communityItems} />}
           </div>
-          <div className="py-2 px-5 space-y-2">
-            <Link href="/community" className="flex">
-              <h4 className="text-gray-500 font-medium block mb-4">Community</h4>
-            </Link>
-            <MenuBlocks items={communityItems} />
+          <div className="py-2 px-5 space-y-2" onClick={() => showMenu('others')}>
             <div className="grid gap-4">
               <div>
-                <h4 className="text-gray-500 font-medium block mb-4">Others</h4>
-                {otherItems.map((item, index) => (
+                <h4 className="text-gray-800 font-medium mb-4 flex justify-between"><a className="cursor-pointer">Others</a><NavItemDropdown /></h4>
+                {open === 'others' && otherItems.map((item, index) => (
                   <Link href={item.href} key={index}>
                     <a
                       target={item.target || '_self'}
                       rel="noopener noreferrer"
                       key={index}
-                      className="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150 block mb-4"
+                      className="py-1 text-base leading-6 font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150 block mb-4"
                       data-testid="MobileNav-others"
                     >
                       {item.text}