From c4d40c39ba637e49e01826172b579e9a4658c226 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 15:15:00 -0500
Subject: [PATCH] feat(ui): nav active-state styling for header and mobile nav
 (batch 0.6.0)

---
 src/components/layout/Header.jsx    |  4 ++--
 src/components/layout/MobileNav.jsx | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index a35b05e..a3a7172 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -124,7 +124,7 @@ const Header = () => {
                       <ul className="space-y-2">
                         {serviceLinks.map((service) => (
                           <li key={service.name}>
-                            <Link to={service.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
+                            <Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}>
                               {service.name}
                             </Link>
                           </li>
@@ -137,7 +137,7 @@ const Header = () => {
                       <ul className="space-y-2">
                         {industryLinks.map((industry) => (
                           <li key={industry.name}>
-                            <Link to={industry.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
+                            <Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}>
                               {industry.name}
                             </Link>
                           </li>
diff --git a/src/components/layout/MobileNav.jsx b/src/components/layout/MobileNav.jsx
index f7136c4..1cd4fdc 100644
--- a/src/components/layout/MobileNav.jsx
+++ b/src/components/layout/MobileNav.jsx
@@ -1,9 +1,10 @@
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 const MobileNav = () => {
   const [isOpen, setIsOpen] = useState(false)
+  const location = useLocation()
 
   const primaryLinks = [
     { name: 'Home', href: '/' },
@@ -33,6 +34,8 @@ const MobileNav = () => {
     setIsOpen(false)
   }
 
+  const isActive = (href) => location.pathname === href
+
   return (
     <div className="md:hidden">
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -75,7 +78,7 @@ const MobileNav = () => {
                       <Link
                         to={link.href}
                         onClick={closeMobileMenu}
-                        className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2"
+                        className={`block text-base font-medium py-2 transition-colors ${isActive(link.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                       >
                         {link.name}
                       </Link>
@@ -93,7 +96,7 @@ const MobileNav = () => {
                       <Link
                         to={service.href}
                         onClick={closeMobileMenu}
-                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
+                        className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                       >
                         {service.name}
                       </Link>
@@ -111,7 +114,7 @@ const MobileNav = () => {
                       <Link
                         to={industry.href}
                         onClick={closeMobileMenu}
-                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
+                        className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                       >
                         {industry.name}
                       </Link>