null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

fix: P0 owner feedback — header & nav fixes (#24, #28, #29, #42) 

- 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)
This commit is contained in:
null 2026-05-17 14:33:41 -05:00
parent 796d372e79
commit c48cf89428
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/layout/Header.jsx
View File

@ -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
export default Header