From c48cf894288734c2408a9557b8a97a570818bf4f Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 14:33:41 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20P0=20owner=20feedback=20=E2=80=94=20head?=
 =?UTF-8?q?er=20&=20nav=20fixes=20(#24,=20#28,=20#29,=20#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove stray 'Primary' heading from mobile menu (fixes #24)
- Logo links to homepage, increased size h-10/h-11 (fixes #28, #42)
- Nav links visible with text-white/70 + active underline state (fixes #29)
- Mobile logo and text size increased for readability (fixes #42)
---
 src/components/layout/Header.jsx | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index a0620ed..a35b05e 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react'
 import { Sheet, SheetTrigger, SheetContent, SheetTitle } from '@/components/ui/Sheet'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 const Header = () => {
   const [isScrolled, setIsScrolled] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const location = useLocation()
 
   useEffect(() => {
     const handleScroll = () => {
@@ -44,18 +45,22 @@ const Header = () => {
 
   const closeMobileMenu = () => setMobileMenuOpen(false)
 
+  const isActive = (href) => location.pathname === href
+
   return (
     <header className={`sticky top-0 z-40 w-full transition-all duration-300 ${isScrolled ? 'bg-primary-navy shadow-md' : 'bg-primary-navy/95'}`}>
       <div className="container mx-auto px-4">
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <div className="flex items-center gap-3">
-            <img 
-              src="/logo.svg" 
-              alt="Queue North Technologies" 
-              className="h-8 w-auto flex-shrink-0" 
-            />
-            <span className="font-bold text-xl text-white hidden sm:block tracking-tight">Queue North</span>
+            <Link to="/" className="flex items-center gap-3">
+              <img 
+                src="/logo.svg" 
+                alt="Queue North Technologies" 
+                className="h-10 w-auto flex-shrink-0" 
+              />
+              <span className="font-bold text-2xl text-white hidden sm:block tracking-tight">Queue North</span>
+            </Link>
           </div>
 
           {/* Desktop Nav */}
@@ -64,7 +69,7 @@ const Header = () => {
               <Link
                 key={link.name}
                 to={link.href}
-                className="text-sm font-medium text-navy-light hover:text-white transition-colors"
+                className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`}
               >
                 {link.name}
               </Link>
@@ -95,17 +100,18 @@ const Header = () => {
                 </VisuallyHidden.Root>
                 <div className="flex flex-col h-full">
                   <div className="flex items-center gap-3 mb-6">
-                    <img src="/logo.svg" alt="Queue North" className="h-9 w-auto" />
-                    <span className="font-bold text-xl">Queue North</span>
+                    <Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3">
+                      <img src="/logo.svg" alt="Queue North" className="h-11 w-auto" />
+                      <span className="font-bold text-2xl">Queue North</span>
+                    </Link>
                   </div>
                   
                   <nav className="flex flex-col space-y-6">
                     <div>
-                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
                       <ul className="space-y-2">
                         {navLinks.map((link) => (
                           <li key={link.name}>
-                            <Link to={link.href} onClick={closeMobileMenu} className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2">
+                            <Link to={link.href} onClick={closeMobileMenu} className={`block text-base font-medium py-2 ${isActive(link.href) ? 'text-white' : 'text-white/70 hover:text-white'} transition-colors`}>
                               {link.name}
                             </Link>
                           </li>
@@ -155,4 +161,4 @@ const Header = () => {
   )
 }
 
-export default Header
\ No newline at end of file
+export default Header