feat: MobileNav section items use Link, close menu on pathname change

src/widgets/Navigation/ui/MobileNav.tsx

@@ -1,9 +1,14 @@
 'use client';
 
-import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { cn } from '$shared/lib';
 import type { NavItem } from '../model/types';
 
+/**
+ * Props for MobileNav.
+ */
 interface Props {
   /**
    * Navigation items to render
@@ -13,21 +18,16 @@ interface Props {
 
 /**
  * Mobile navigation overlay, hidden on lg+ screens.
+ * Closes automatically when the URL pathname changes after navigation.
  */
 export function MobileNav({ items }: Props) {
   const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
 
-  /**
-   * Scrolls to the section by id with a 100px offset, then closes the menu.
-   */
-  function scrollToSection(id: string) {
-    const el = document.getElementById(id);
-    if (el) {
-      const top = el.getBoundingClientRect().top + window.scrollY - 100;
-      window.scrollTo({ top, behavior: 'smooth' });
-    }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pathname is the trigger, not a value used inside the callback
+  useEffect(() => {
     setIsOpen(false);
-  }
+  }, [pathname]);
 
   return (
     <div className="lg:hidden fixed top-0 left-0 right-0 bg-ochre-clay brutal-border-bottom z-50">
@@ -44,12 +44,7 @@ export function MobileNav({ items }: Props) {
       {isOpen && (
         <div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
           {items.map((item) => (
-            <button
-              type="button"
-              key={item.id}
-              onClick={() => scrollToSection(item.id)}
-              className="w-full text-left brutal-border bg-ochre-clay px-4 py-3"
-            >
+            <Link key={item.id} href={`/${item.id}`} className="block w-full brutal-border bg-ochre-clay px-4 py-3">
               <div className={cn('flex items-baseline gap-3')}>
                 <span className="text-sm opacity-60 font-body">{item.number}</span>
                 <span
@@ -59,7 +54,7 @@ export function MobileNav({ items }: Props) {
                   {item.label}
                 </span>
               </div>
-            </button>
+            </Link>
           ))}
         </div>
       )}