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 [isScrolled, setIsScrolled] = useState(false)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [openDropdown, setOpenDropdown] = useState(null)
const location = useLocation()
useEffect(() => {
@ -16,6 +17,10 @@ const Header = () => {
return () => window.removeEventListener('scroll', handleScroll)
}, [])
useEffect(() => {
setOpenDropdown(null)
}, [location.pathname])
const navLinks = [
{ name: 'Home', href: '/' },
{ name: 'Services', href: '/services' },
@ -43,6 +48,7 @@ const Header = () => {
]
const closeMobileMenu = () => setMobileMenuOpen(false)
const closeDropdown = () => setOpenDropdown(null)
const isActive = (href) => location.pathname === href
@ -64,48 +70,70 @@ const Header = () => {
{/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6" aria-label="Main navigation">
{navLinks.map((link) => (
<div key={link.name} className="relative group">
<Link
to={link.href}
className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`}
{navLinks.map((link) => {
const hasDropdown = link.name === 'Services' || link.name === 'Industries'
return (
<div
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>
{/* Services Dropdown */}
{link.name === 'Services' && (
<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">
{serviceLinks.map((service) => (
<Link
key={service.name}
to={service.href}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{service.name}
</Link>
))}
<Link
to={link.href}
onFocus={() => hasDropdown && setOpenDropdown(link.name)}
onClick={closeDropdown}
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>
{/* Services Dropdown */}
{link.name === 'Services' && (
<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">
{serviceLinks.map((service) => (
<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>
)}
{/* Industries Dropdown */}
{link.name === 'Industries' && (
<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">
{industryLinks.map((industry) => (
<Link
key={industry.name}
to={industry.href}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{industry.name}
</Link>
))}
)}
{/* Industries Dropdown */}
{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="p-2">
{industryLinks.map((industry) => (
<Link
key={industry.name}
to={industry.href}
onClick={closeDropdown}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{industry.name}
</Link>
))}
</div>
</div>
</div>
)}
</div>
))}
)}
</div>
)
})}
</nav>
{/* CTA Button */}

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

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