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

#181

This commit is contained in:
null 2026-05-26 13:04:57 -05:00
parent 335601b00e
commit f0f0cfd599
2 changed files with 71 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { Link, useLocation } from 'react-router-dom'
const Header = () => { const Header = () => {
const [isScrolled, setIsScrolled] = useState(false) const [isScrolled, setIsScrolled] = useState(false)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [openDropdown, setOpenDropdown] = useState(null)
const location = useLocation() const location = useLocation()
useEffect(() => { useEffect(() => {
@ -16,6 +17,10 @@ const Header = () => {
return () => window.removeEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll)
}, []) }, [])
useEffect(() => {
setOpenDropdown(null)
}, [location.pathname])
const navLinks = [ const navLinks = [
{ name: 'Home', href: '/' }, { name: 'Home', href: '/' },
{ name: 'Services', href: '/services' }, { name: 'Services', href: '/services' },
@ -43,6 +48,7 @@ const Header = () => {
] ]
const closeMobileMenu = () => setMobileMenuOpen(false) const closeMobileMenu = () => setMobileMenuOpen(false)
const closeDropdown = () => setOpenDropdown(null)
const isActive = (href) => location.pathname === href const isActive = (href) => location.pathname === href
@ -64,48 +70,70 @@ const Header = () => {
{/* Desktop Nav */} {/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6" aria-label="Main navigation"> <nav className="hidden md:flex items-center gap-6" aria-label="Main navigation">
{navLinks.map((link) => ( {navLinks.map((link) => {
<div key={link.name} className="relative group"> const hasDropdown = link.name === 'Services' || link.name === 'Industries'
<Link return (
to={link.href} <div
className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`} key={link.name}
className="relative"
onMouseEnter={() => hasDropdown && setOpenDropdown(link.name)}
onMouseLeave={closeDropdown}
onBlur={(event) => {
if (!event.currentTarget.contains(event.relatedTarget)) {
closeDropdown()
}
}}
onKeyDown={(event) => {
if (event.key === 'Escape') {
closeDropdown()
}
}}
> >
{link.name} <Link
</Link> to={link.href}
{/* Services Dropdown */} onFocus={() => hasDropdown && setOpenDropdown(link.name)}
{link.name === 'Services' && ( onClick={closeDropdown}
<div className="absolute top-full left-0 w-64 bg-white rounded-md shadow-xl border border-gray-200 hidden group-hover:block pt-2"> className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`}
<div className="p-2"> >
{serviceLinks.map((service) => ( {link.name}
<Link </Link>
key={service.name} {/* Services Dropdown */}
to={service.href} {link.name === 'Services' && (
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors" <div className={`absolute top-full left-0 w-64 bg-white rounded-md shadow-xl border border-gray-200 pt-2 ${openDropdown === 'Services' ? 'block' : 'hidden'}`}>
> <div className="p-2">
{service.name} {serviceLinks.map((service) => (
</Link> <Link
))} key={service.name}
to={service.href}
onClick={closeDropdown}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{service.name}
</Link>
))}
</div>
</div> </div>
</div> )}
)} {/* Industries Dropdown */}
{/* Industries Dropdown */} {link.name === 'Industries' && (
{link.name === 'Industries' && ( <div className={`absolute top-full left-0 w-64 bg-white rounded-md shadow-xl border border-gray-200 pt-2 ${openDropdown === 'Industries' ? 'block' : 'hidden'}`}>
<div className="absolute top-full left-0 w-64 bg-white rounded-md shadow-xl border border-gray-200 hidden group-hover:block pt-2"> <div className="p-2">
<div className="p-2"> {industryLinks.map((industry) => (
{industryLinks.map((industry) => ( <Link
<Link key={industry.name}
key={industry.name} to={industry.href}
to={industry.href} onClick={closeDropdown}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
> >
{industry.name} {industry.name}
</Link> </Link>
))} ))}
</div>
</div> </div>
</div> )}
)} </div>
</div> )
))} })}
</nav> </nav>
{/* CTA Button */} {/* CTA Button */}

4
test-results/.last-run.json Normal file
View File

@ -0,0 +1,4 @@
{
"status": "failed",
"failedTests": []
}