fix: close MobileNav on click list item

Author: babblebey

components/main-nav.tsx

@@ -54,14 +54,14 @@ export function MainNav({ items }: MainNavProps) {
             </nav>
           ) : null}
           <button
-            className="flex items-center space-x-2 md:hidden"
+            className="flex items-center space-x-2 md:hidden focus-visible:outline-0 focus-visible:border-0 focus-within:outline-0 focus-within:border-0"
             onClick={() => setShowMobileMenu(!showMobileMenu)}
           >
             {showMobileMenu ? <Icons.cancel /> : <Icons.logo className="w-6 h-6 dark:invert"/>}
             <span className="font-bold">Menu</span>
           </button>
           {showMobileMenu && items && (
-            <MobileNav items={items} />
+            <MobileNav items={items} setShowMobileMenu={setShowMobileMenu} />
           )}
         </div>
         <nav>

components/mobile-nav.tsx

@@ -1,18 +1,19 @@
 import * as React from "react";
 import Link from "next/link";
 
+import { cn } from "@/lib/utils";
 import { MainNavItem } from "@/types";
+import { Icons } from "@/components/icons";
 import { siteConfig } from "@/config/site";
-import { cn } from "@/lib/utils";
 import { useLockBody } from "@/hooks/use-lock-body";
-import { Icons } from "@/components/icons";
 
 interface MobileNavProps {
-  items: MainNavItem[]
+  items: MainNavItem[],
+  setShowMobileMenu: React.Dispatch<React.SetStateAction<boolean>>,
   children?: React.ReactNode
 }
 
-export function MobileNav({ items }: MobileNavProps) {
+export function MobileNav({ items, setShowMobileMenu }: MobileNavProps) {
   useLockBody();
 
   return (
@@ -31,6 +32,7 @@ export function MobileNav({ items }: MobileNavProps) {
                 "flex w-full items-center rounded-md py-2 font-medium hover:underline",
                 item.disabled && "cursor-not-allowed opacity-60"
               )}
+              onClick={() => !item.disabled && setShowMobileMenu(false) }
             >
               {item.title}
             </Link>

config/nav.ts

@@ -8,15 +8,16 @@ export const navConfig: NavConfig = {
     },
     {
       title: "Blog",
-      href: "/blog"
+      href: "/blog",
+      disabled: true // Pending Feature Built
+    },
+    {
+      title: "Tools",
+      href: "/#tools"
     },
     {
       title: "Projects",
       href: "/#projects"
     },
-    {
-      title: "Tools",
-      href: "/#tools"
-    }
   ]
 }

styles/globals.css

@@ -75,6 +75,10 @@
   }
 }
 
+html {
+  @apply scroll-smooth;
+}
+
 .m-itbey {
   @apply inline-flex gap-1 items-center align-bottom
 }