#181

src/components/layout/Header.jsx

@@ -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,22 +70,42 @@ 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">
+            {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
                     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 hidden group-hover:block pt-2">
+                    <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}
@@ -90,12 +116,13 @@ const Header = () => {
                   )}
                   {/* 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={`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}
@@ -105,7 +132,8 @@ const Header = () => {
                     </div>
                   )}
                 </div>
-            ))}
+              )
+            })}
           </nav>
 
           {/* CTA Button */}

test-results/.last-run.json

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