From 4685f6400bb0fe7ead998d3bd78268ad1b31c168 Mon Sep 17 00:00:00 2001
From: rahan <maxime.luet@gmail.com>
Date: Fri, 26 Jun 2026 00:28:40 +0200
Subject: [PATCH] fix(nav): refactor desktop layout and rebuild mobile as GSAP
 accordion pill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Desktop: grid → flex gap-8, avatar gap-2 → gap-3, remove dead wrapper div.
Mobile: replace bare flex bar with a floating pill (24px radius, dark glass)
containing an integrated accordion body animated by GSAP (height auto/0).
Accordion footer adds availability badge + GitHub icon separated by a divider.
Text sizes bumped to base for logo and links, sm for badge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/layout/StickyNav.tsx | 160 ++++++++++++++++++++++----------
 1 file changed, 113 insertions(+), 47 deletions(-)

diff --git a/components/layout/StickyNav.tsx b/components/layout/StickyNav.tsx
index c5b8080..354ce7b 100644
--- a/components/layout/StickyNav.tsx
+++ b/components/layout/StickyNav.tsx
@@ -26,6 +26,8 @@ export function StickyNav() {
   const ulRef = useRef<HTMLUListElement>(null)
   const linkRefs = useRef<(HTMLAnchorElement | null)[]>([])
   const hasAnimated = useRef(false)
+  const mobilePillRef = useRef<HTMLElement>(null)
+  const mobileAccordionRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 60)
@@ -55,6 +57,7 @@ export function StickyNav() {
     return () => observer.disconnect()
   }, [isHome])
 
+  // Desktop indicator animation
   useGSAP(() => {
     const ul = ulRef.current
     if (!ul) return
@@ -89,29 +92,55 @@ export function StickyNav() {
     }
   }, { dependencies: [activeSection] })
 
+  // Mobile accordion — set initial state
+  useGSAP(() => {
+    gsap.set(mobileAccordionRef.current, { height: 0 })
+    gsap.set(mobilePillRef.current, { borderRadius: 24 })
+  }, { dependencies: [] })
+
+  // Mobile accordion — animate on toggle
+  useGSAP(() => {
+    const accordion = mobileAccordionRef.current
+    const pill = mobilePillRef.current
+    if (!accordion || !pill) return
+
+    if (menuOpen) {
+      gsap.to(accordion, {
+        height: 'auto',
+        duration: 0.35,
+        ease: 'power3.out',
+        overwrite: true,
+      })
+    } else {
+      gsap.to(accordion, {
+        height: 0,
+        duration: 0.25,
+        ease: 'power3.in',
+        overwrite: true,
+      })
+    }
+  }, { dependencies: [menuOpen] })
+
+  const pillBg = scrolled
+    ? 'bg-black/90 border-white/[0.08]'
+    : 'bg-white/[0.08] border-white/[0.12]'
+
   return (
     <header
       data-sticky-nav
-      className={cn(
-        'fixed top-0 inset-x-0 z-50 h-20',
-        // Mobile only: white bg when scrolled (desktop pill handles its own bg)
-        scrolled ? 'bg-background/95 backdrop-blur-sm border-b border-border sm:bg-transparent sm:backdrop-blur-none sm:border-0' : 'bg-transparent'
-      )}
+      className="fixed top-0 inset-x-0 z-50 h-20"
     >
       {/* Desktop — centered floating dark pill */}
       <div className="hidden sm:flex items-center justify-center h-full">
-        <div className="flex items-center gap-2">
         <nav
           className={cn(
-            'grid grid-cols-[1fr_auto_1fr] items-center w-180 rounded-full border backdrop-blur-md px-3 py-2 transition-all duration-300',
-            scrolled
-              ? 'bg-black/90 border-white/[0.08]'
-              : 'bg-white/[0.08] border-white/[0.12]'
+            'flex items-center gap-8 rounded-full border backdrop-blur-md px-3 py-2 transition-all duration-300',
+            pillBg
           )}
           aria-label="Main navigation"
         >
           {/* Avatar + Logo group */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
             <Image
               src="/images/about/avatar.jpg"
               alt="Maxime Luet"
@@ -152,8 +181,8 @@ export function StickyNav() {
             })}
           </ul>
 
-          {/* Badge */}
-          <div className="flex items-center justify-end gap-3">
+          {/* Badge + GitHub */}
+          <div className="flex items-center gap-3 ml-auto">
             <div className="flex items-center gap-2 text-sm">
               <span
                 className="size-2 rounded-full bg-emerald-400 shrink-0"
@@ -174,51 +203,64 @@ export function StickyNav() {
             </a>
           </div>
         </nav>
-        </div>
       </div>
 
-      {/* Mobile — simple flex row */}
-      <nav className="sm:hidden flex items-center px-6 h-full" aria-label="Main navigation">
-        <Link
-          href="/"
-          className={cn('text-xl font-normal mr-auto transition-colors duration-300', scrolled ? 'text-primary' : 'text-white')}
-        >
-          Maxime Luet
-        </Link>
-
-        <button
-          className={cn(
-            'transition-colors duration-300',
-            scrolled ? 'text-text-secondary hover:text-primary' : 'text-white/60 hover:text-white'
-          )}
-          onClick={() => setMenuOpen(!menuOpen)}
-          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
-          aria-expanded={menuOpen}
-        >
-          {menuOpen ? <X className="size-5" aria-hidden="true" /> : <Menu className="size-5" aria-hidden="true" />}
-        </button>
-      </nav>
-
-      {menuOpen && (
-        <>
-          {/* ponytail: backdrop dismiss */}
+      {/* Mobile — pill with integrated accordion */}
+      <div className="sm:hidden flex justify-center items-start pt-4 px-4">
+        {/* ponytail: backdrop dismiss */}
+        {menuOpen && (
           <div
-            className="sm:hidden fixed inset-0 top-20 z-[-1]"
+            className="fixed inset-0 top-0 z-[-1]"
             aria-hidden="true"
             onClick={() => setMenuOpen(false)}
           />
-          <div className={cn('sm:hidden border-t', scrolled ? 'bg-background/95 backdrop-blur-sm border-border' : 'border-foreground/[8%] bg-white/80 backdrop-blur-sm')}>
-            <ul className="flex flex-col px-6 py-3 gap-0.5" role="list">
+        )}
+        <nav
+          ref={mobilePillRef}
+          className={cn(
+            'w-full border backdrop-blur-md overflow-hidden transition-colors duration-300',
+            pillBg
+          )}
+          aria-label="Main navigation"
+        >
+          {/* Header row — always visible */}
+          <div className="flex items-center gap-3 px-3 py-2">
+            <Image
+              src="/images/about/avatar.jpg"
+              alt="Maxime Luet"
+              width={28}
+              height={28}
+              className="size-7 rounded-full object-cover shrink-0"
+            />
+            <Link
+              href="/"
+              className="text-base font-normal text-white transition-opacity duration-200 hover:opacity-70"
+            >
+              Maxime Luet
+            </Link>
+            <button
+              className="ml-auto text-white/60 hover:text-white transition-colors duration-200"
+              onClick={() => setMenuOpen(!menuOpen)}
+              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={menuOpen}
+            >
+              {menuOpen ? <X className="size-5" aria-hidden="true" /> : <Menu className="size-5" aria-hidden="true" />}
+            </button>
+          </div>
+
+          {/* Accordion body — GSAP-controlled height */}
+          <div ref={mobileAccordionRef} className="overflow-hidden">
+            <ul className="flex flex-col px-4 pt-1 pb-3 gap-0.5" role="list">
               {links.map(({ href, label, section }) => (
                 <li key={href}>
                   <Link
                     href={href}
                     onClick={() => setMenuOpen(false)}
                     className={cn(
-                      'block py-2 text-sm font-medium transition-colors duration-200',
+                      'block py-2 text-base font-medium transition-colors duration-200',
                       isHome && activeSection === section
-                        ? 'text-foreground'
-                        : 'text-text-secondary hover:text-primary'
+                        ? 'text-white'
+                        : 'text-white/55 hover:text-white/90'
                     )}
                   >
                     {label}
@@ -226,9 +268,33 @@ export function StickyNav() {
                 </li>
               ))}
             </ul>
+
+            {/* Divider */}
+            <div className="border-t border-white/[0.08] mx-4" />
+
+            {/* Footer — badge + GitHub */}
+            <div className="flex items-center justify-between px-4 py-3">
+              <div className="flex items-center gap-2 text-sm">
+                <span
+                  className="size-1.5 rounded-full bg-emerald-400 shrink-0"
+                  aria-hidden="true"
+                  style={{ boxShadow: '0 0 6px 2px rgba(52,211,153,0.55)' }}
+                />
+                <span className="font-normal text-white/70">Available for work</span>
+              </div>
+              <a
+                href="#"
+                aria-label="GitHub"
+                className="text-white/40 hover:text-white/80 transition-colors duration-200"
+              >
+                <svg viewBox="0 0 24 24" className="size-6 fill-current" aria-hidden="true">
+                  <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
+                </svg>
+              </a>
+            </div>
           </div>
-        </>
-      )}
+        </nav>
+      </div>
     </header>
   )
 }