From f0f0cfd5990f4a29f5c51d7f0739b8a3647f3371 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Tue, 26 May 2026 13:04:57 -0500
Subject: [PATCH] #181

---
 src/components/layout/Header.jsx | 106 +++++++++++++++++++------------
 test-results/.last-run.json      |   4 ++
 2 files changed, 71 insertions(+), 39 deletions(-)
 create mode 100644 test-results/.last-run.json

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 7f619a6..acd6a4b 100644
--- a/src/components/layout/Header.jsx
+++ b/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,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 */}
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 0000000..5fca3f8
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}
\ No newline at end of file