Updated MobileNavMenu & MenuBlocks

asyncapi · Nov 4, 2023 · 379882e · 379882e
1 parent 6657fb2
commit 379882e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 19 deletions.
diff --git a/components/navigation/MenuBlocks.js b/components/navigation/MenuBlocks.js
@@ -1,20 +1,12 @@
-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');
@@ -41,7 +33,6 @@ export default function MenuBlocks ({
           )
         })
       }
-    </div>
-    </div>
+    </>
   )
 }
diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
@@ -72,18 +72,15 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
             </div>
           </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>
+            <h4 className="text-gray-800 font-medium flex justify-between"> <a className="cursor-pointer"><Link href="/docs" className="flex">Docs</Link></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>
+            <h4 className="text-gray-800 font-medium flex justify-between"> <a className="cursor-pointer"><Link href="/tools" className="flex">Tools</Link></a><NavItemDropdown/></h4>
             {open === 'tooling' && <MenuBlocks items={toolingItems} />}
           </div>
           <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>
+            <h4 className="text-gray-800 font-medium flex justify-between"><a className="cursor-pointer"><Link href="/community" className="flex">Community</Link></a><NavItemDropdown/></h4>
             {open === 'community' && <MenuBlocks items={communityItems} />}
           </div>
           <div className="py-2 px-5 space-y-2" onClick={() => showMenu('others')}>