fix: Improve hamburger menu by putting in vertical the bvbvvbnav-items in vertical (#23)

Author: franciscosuca

app/components/nav.tsx

@@ -26,13 +26,13 @@ export function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen)
+    setIsMenuOpen(!isMenuOpen);
   }
 
   return (
     <aside className="-ml-[8px] mb-16 tracking-tight">
       <div className="lg:sticky lg:top-20">
-        {/* HamburgerMenu */}
+        {/* Hamburger Button */}
         <div className='md:hidden'>
           <button
             onClick={toggleMenu}
@@ -41,24 +41,38 @@ export function Navbar() {
             {isMenuOpen ? <FiX/> : <FiMenu/>}
           </button>
         </div>
-        {/* NavMenu */}
-        <nav
-          className={`${isMenuOpen ? 'block' : 'hidden'} md:flex flex-col md:flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative`}
-          id="nav">
-          <div className="flex flex-row space-x-0 pr-10">
-            {Object.entries(navItems).map(([path, { name }]) => {
-              return (
-                <Link
-                  key={path}
-                  href={path}
-                  className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2 m-1"
-                >
-                  {name}
-                </Link>
-              )
-            })}
-          </div>
-        </nav>
+        {isMenuOpen? (
+          <nav id='nav' className='flex flex-col space-y-2'>
+            <ul>
+              {Object.entries(navItems).map(([path, { name }]) => {
+                return (
+                  <li key={path} className='py-1'>
+                    <Link href={path}>{name}</Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </nav>
+        ):
+        (
+            <nav
+            className="hidden sm:hidden md:flex flex-col md:flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative"
+            id="nav">
+            <div className="flex flex-row space-x-0 pr-10">
+              {Object.entries(navItems).map(([path, { name }]) => {
+                return (
+                  <Link
+                    key={path}
+                    href={path}
+                    className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2 m-1"
+                  >
+                    {name}
+                  </Link>
+                )
+              })}
+            </div>
+          </nav>
+        )}
       </div>
     </aside>
   )

project-plan.md

@@ -27,14 +27,14 @@
 # v1.2.6
 
 - ~~Update About page and footer~~
-- Improve hamburger menu: it should show the nav-items in vertical
-- Add link to portfolio page created with Vercel
-- Replace react webpage icon
+- ~~Improve hamburger menu by putting in vertical the  bvbvvbnav-items in vertical~~
 
 # 1.2.7
 
+- Add link to portfolio page created with Vercel
+- Replace react webpage icon
 - Create the pending task for the project on GIthub
-- Manually addd old version details to the project (changelog)
+- Manually add old version details to the project (changelog)
 
 # v1.3.0 --> Time to work with AZ stuff for Az204