From 463841e1910f4ddb9af662f036e4efb867836a83 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 14:02:52 -0500
Subject: [PATCH] feat(nav): add transparent nav bar with borders when hero
 visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the hero section is visible on the homepage, the navigation bar
now becomes transparent with a fixed position overlay, featuring
contrasting white borders around nav elements for visibility. The nav
links change to white text for better contrast against the dark hero
background.

When scrolling past the hero, the nav returns to its normal white
background with sticky positioning.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppNavBar.tsx | 84 ++++++++++++++++++++++-----
 1 file changed, 68 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index faa7fc33..3aa8f5c5 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -569,17 +569,23 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     )
   }
 
+  // Check if we should use transparent styling (when hero is visible)
+  const isTransparent = homeHero?.isHeroVisible
+
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
         className={css({
-          bg: 'white',
-          shadow: 'sm',
-          borderBottom: '1px solid',
-          borderColor: 'gray.200',
-          position: 'sticky',
+          bg: isTransparent ? 'transparent' : 'white',
+          shadow: isTransparent ? 'none' : 'sm',
+          borderBottom: isTransparent ? 'none' : '1px solid',
+          borderColor: isTransparent ? 'transparent' : 'gray.200',
+          position: isTransparent ? 'fixed' : 'sticky',
           top: 0,
+          left: 0,
+          right: 0,
           zIndex: 30,
+          transition: 'all 0.3s ease',
         })}
       >
         <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
@@ -653,22 +659,54 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
               <div />
             )}
 
-            <div className={hstack({ gap: '6', alignItems: 'center' })}>
+            <div
+              className={css({
+                display: 'flex',
+                gap: '6',
+                alignItems: 'center',
+                px: isTransparent ? '4' : '0',
+                py: isTransparent ? '2' : '0',
+                rounded: isTransparent ? 'lg' : 'none',
+                border: isTransparent ? '1px solid' : 'none',
+                borderColor: isTransparent ? 'rgba(255, 255, 255, 0.3)' : 'transparent',
+                transition: 'all 0.3s ease',
+              })}
+            >
               {/* Navigation Links */}
-              <nav className={hstack({ gap: '4' })}>
-                <NavLink href="/create" currentPath={pathname}>
+              <nav
+                className={css({
+                  display: 'flex',
+                  gap: '4',
+                  px: isTransparent ? '2' : '0',
+                  py: isTransparent ? '1' : '0',
+                  rounded: isTransparent ? 'md' : 'none',
+                  border: isTransparent ? '1px solid' : 'none',
+                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
+                })}
+              >
+                <NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
                   Create
                 </NavLink>
-                <NavLink href="/guide" currentPath={pathname}>
+                <NavLink href="/guide" currentPath={pathname} isTransparent={isTransparent}>
                   Guide
                 </NavLink>
-                <NavLink href="/games" currentPath={pathname}>
+                <NavLink href="/games" currentPath={pathname} isTransparent={isTransparent}>
                   Games
                 </NavLink>
               </nav>
 
-              {/* Abacus Style Dropdown */}
-              <AbacusDisplayDropdown isFullscreen={false} />
+              {/* Abacus Style Dropdown - with border when transparent */}
+              <div
+                className={css({
+                  px: isTransparent ? '2' : '0',
+                  py: isTransparent ? '1' : '0',
+                  rounded: isTransparent ? 'md' : 'none',
+                  border: isTransparent ? '1px solid' : 'none',
+                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
+                })}
+              >
+                <AbacusDisplayDropdown isFullscreen={false} />
+              </div>
             </div>
           </div>
         </div>
@@ -699,10 +737,12 @@ function NavLink({
   href,
   currentPath,
   children,
+  isTransparent,
 }: {
   href: string
   currentPath: string | null
   children: React.ReactNode
+  isTransparent?: boolean
 }) {
   const isActive = currentPath === href || (href !== '/' && currentPath?.startsWith(href))
 
@@ -716,8 +756,20 @@ function NavLink({
         minW: { base: '44px', md: 'auto' },
         fontSize: 'sm',
         fontWeight: 'medium',
-        color: isActive ? 'brand.700' : 'gray.600',
-        bg: isActive ? 'brand.50' : 'transparent',
+        color: isTransparent
+          ? isActive
+            ? 'white'
+            : 'rgba(255, 255, 255, 0.8)'
+          : isActive
+            ? 'brand.700'
+            : 'gray.600',
+        bg: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.15)'
+            : 'transparent'
+          : isActive
+            ? 'brand.50'
+            : 'transparent',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
@@ -725,8 +777,8 @@ function NavLink({
         alignItems: 'center',
         justifyContent: 'center',
         _hover: {
-          color: isActive ? 'brand.800' : 'gray.900',
-          bg: isActive ? 'brand.100' : 'gray.50',
+          color: isTransparent ? 'white' : isActive ? 'brand.800' : 'gray.900',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : isActive ? 'brand.100' : 'gray.50',
         },
       })}
     >