wip

components/Header.tsx

@@ -12,6 +12,7 @@ export default function Header() {
   const t = useTranslations('Navigation');
   const pathname = usePathname();
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
@@ -27,6 +28,20 @@ export default function Header() {
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [pathname]);
+
+  // Prevent scroll when mobile menu is open
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [isMobileMenuOpen]);
   
   // Function to get path for a different locale
   const getPathForLocale = (newLocale: string) => {
@@ -45,8 +60,8 @@ export default function Header() {
   const headerClass = cn(
     "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
     {
-      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled,
-      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled,
+      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
+      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
     }
   );
 
@@ -114,15 +129,79 @@ export default function Header() {
             </div>
 
             {/* Mobile Menu Button */}
-            <button className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
+            <button 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 z-50", textColorClass)}
+              aria-label="Toggle Menu"
+            >
               <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                {isMobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
               </svg>
             </button>
           </div>
         </div>
+
+        {/* Mobile Menu Overlay */}
+        <div className={cn(
+          "fixed inset-0 bg-primary-dark z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col",
+          isMobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
+        )}>
+          <div className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+            {menuItems.map((item, idx) => (
+              <Link 
+                key={item.href} 
+                href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                className={cn(
+                  "text-3xl font-extrabold text-white hover:text-accent transition-all transform",
+                  isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
+                )}
+                style={{ transitionDelay: `${idx * 100}ms` }}
+              >
+                {item.label}
+              </Link>
+            ))}
+            
+            <div className={cn(
+              "pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500 delay-500",
+              isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
+            )}>
+              <div className="flex items-center space-x-8 text-xl font-extrabold tracking-widest uppercase text-white">
+                <Link 
+                  href={getPathForLocale('en')} 
+                  className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                >
+                  EN
+                </Link>
+                <div className="w-px h-6 bg-white/20" />
+                <Link 
+                  href={getPathForLocale('de')} 
+                  className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                >
+                  DE
+                </Link>
+              </div>
+              
+              <Button 
+                href={`/${currentLocale}/contact`}
+                variant="accent" 
+                size="lg"
+                className="w-full max-w-xs py-6 text-xl shadow-2xl"
+              >
+                {t('contact')}
+              </Button>
+            </div>
+          </div>
+          
+          {/* Bottom Branding */}
+          <div className="p-12 flex justify-center opacity-20">
+            <Image src="/logo-white.svg" alt="KLZ" width={80} height={80} unoptimized />
+          </div>
+        </div>
       </header>
-      {/* Removed spacer div that caused white gap */}
     </>
   );
 }