Updated CSS styles

app/components/Header.tsx

@@ -1,11 +1,20 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 
 export default function Header() {
   const [open, setOpen] = useState(false);
+  const [navOpen, setNavOpen] = useState(false);
+
+  useEffect(() => {
+    const lock = open || navOpen;
+    document.body.style.overflow = lock ? 'hidden' : '';
+    return () => { document.body.style.overflow = ''; };
+  }, [open, navOpen]);
+
+  const closeAll = () => { setOpen(false); setNavOpen(false); };
 
   return (
     <>
@@ -13,46 +22,72 @@ export default function Header() {
         <div className="container">
           <div className="ux-navbar">
 
-            <Link href="/">
+            <Link href="/" className="ux-brand" onClick={closeAll}>
               <Image
                 src="/assets/images/footerlogo.png"
                 alt="Logo"
                 width={120}
                 height={40}
+                priority
               />
             </Link>
 
-            <ul className="ux-nav">
-              <li><Link href="/work">Work</Link></li>
-              <li><Link href="/services">Services</Link></li>
-              <li><Link href="/about">About</Link></li>
-              <li><Link href="/process">Process</Link></li>
+            <ul className={`ux-nav ${navOpen ? 'is-open' : ''}`}>
+              <li><Link href="/work" onClick={closeAll}>Work</Link></li>
+              <li><Link href="/services" onClick={closeAll}>Services</Link></li>
+              <li><Link href="/about" onClick={closeAll}>About</Link></li>
+              <li><Link href="/process" onClick={closeAll}>Process</Link></li>
 
-              {/* ⚠️ FIX */}
               <li className="ux-nav-cta">
-                <Link href="/start_project">Start a Project</Link>
+                <Link href="/start_project" onClick={closeAll}>Start a Project</Link>
               </li>
             </ul>
 
-            {/* TOGGLE BUTTON */}
-            <div
-              className="ux-menu"
-              onClick={() => setOpen(!open)}
-            >
-              <Image
-                className="icon open-icon"
-                src="/assets/images/menutoggle.svg"
-                alt="menu"
-                width={30}
-                height={30}
-              />
+            <div className="ux-header-actions">
+              <button
+                type="button"
+                className={`ux-hamburger ${navOpen ? 'is-active' : ''}`}
+                aria-label="Toggle navigation"
+                aria-expanded={navOpen}
+                onClick={() => { setNavOpen(!navOpen); setOpen(false); }}
+              >
+                <span></span><span></span><span></span>
+              </button>
+
+              <button
+                type="button"
+                className={`ux-menu ${open ? 'active' : ''}`}
+                aria-label="Toggle contact panel"
+                aria-expanded={open}
+                onClick={() => { setOpen(!open); setNavOpen(false); }}
+              >
+                <Image
+                  className="icon open-icon"
+                  src="/assets/images/menutoggle.svg"
+                  alt=""
+                  width={30}
+                  height={30}
+                />
+                <Image
+                  className="icon close-icon"
+                  src="/assets/images/closetoggle.svg"
+                  alt=""
+                  width={30}
+                  height={30}
+                />
+              </button>
             </div>
 
           </div>
         </div>
       </header>
 
-      {/* RIGHT PANEL */}
+      <div
+        className={`ux-overlay ${(open || navOpen) ? 'active' : ''}`}
+        onClick={closeAll}
+        aria-hidden="true"
+      />
+
       <div className={`contact-panel ${open ? 'active' : ''}`}>
         <h4>
           <Image src="/assets/images/hello.svg" alt="hello" width={24} height={24} />
@@ -77,4 +112,4 @@ export default function Header() {
       </div>
     </>
   );
-}
+}