diff options
Diffstat (limited to 'frontend/src/components/header.tsx')
| -rw-r--r-- | frontend/src/components/header.tsx | 130 |
1 files changed, 129 insertions, 1 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx index 475c1f3..a8ddadc 100644 --- a/frontend/src/components/header.tsx +++ b/frontend/src/components/header.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; import { Button } from "@/components/ui/button"; @@ -39,6 +39,8 @@ import { export function Header() { const [cartItems] = useState(3); const [wishlistItems] = useState(5); + const [isMounted, setIsMounted] = useState(false); + const sheetRef = useRef<HTMLDivElement>(null); const categories = [ { @@ -74,6 +76,20 @@ export function Header() { // Preload both logo variants to ensure smooth loading useEffect(() => { + setIsMounted(true); + + // Add global error handler for scroll-related errors + const handleError = (event: ErrorEvent) => { + if (event.error?.message?.includes('parameter 1 is not of type \'Node\'') || + event.error?.message?.includes('handleScroll')) { + console.warn('Scroll handling error caught and suppressed:', event.error); + event.preventDefault(); + return false; + } + }; + + window.addEventListener('error', handleError); + const preloadLogos = () => { if (typeof window !== 'undefined') { const lightLogo = new window.Image(); @@ -84,8 +100,93 @@ export function Header() { }; preloadLogos(); + + return () => { + window.removeEventListener('error', handleError); + }; }, []); + // Prevent hydration issues with Sheet component + if (!isMounted) { + return ( + <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> + {/* Top banner */} + <div className="bg-black text-white text-center py-2 px-4"> + <p className="text-sm font-medium"> + FREE SHIPPING ON ORDERS OVER $100 • NEW ARRIVALS EVERY WEEK + </p> + </div> + + {/* Announcement bar */} + <div className="bg-neutral-100 dark:bg-neutral-800 text-center py-2 px-4"> + <p className="text-sm"> + 🔥 <span className="font-semibold">WINTER SALE</span> - Up to 50% off on selected items + </p> + </div> + + {/* Main header */} + <div className="border-b dark:border-neutral-800"> + <div className="container mx-auto px-3 sm:px-4 lg:px-6"> + <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4"> + {/* Mobile menu placeholder */} + <Button + variant="ghost" + size="icon" + className="md:hidden nav-button-transparent backdrop-blur-sm" + disabled + > + <Menu className="h-5 w-5" /> + </Button> + + {/* Logo */} + <div className="flex items-center"> + <Link href="/" className="flex items-center space-x-2"> + <Image + src="/black-logo.png" + alt="blcklst" + width={120} + height={40} + className="h-8 w-auto block dark:hidden" + priority + /> + <Image + src="/white-logo.png" + alt="blcklst" + width={120} + height={40} + className="h-8 w-auto hidden dark:block" + priority + /> + </Link> + </div> + + {/* Simplified action buttons for SSR */} + <div className="flex items-center space-x-1 sm:space-x-2"> + <Button + variant="ghost" + size="icon" + className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" + disabled + > + <Search className="h-5 w-5" /> + </Button> + + <Button + variant="ghost" + size="icon" + className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" + disabled + > + <ShoppingBag className="h-5 w-5" /> + </Button> + </div> + </div> + </div> + </div> + </header> + ); + } + return ( <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> {/* Top banner */} @@ -118,8 +219,35 @@ export function Header() { </Button> </SheetTrigger> <SheetContent + ref={sheetRef} side="left" className="w-[280px] xs:w-[320px] sm:w-[380px] p-0 border-r dark:border-neutral-800" + onOpenAutoFocus={(event) => { + // Prevent auto focus to avoid scroll handling issues + event.preventDefault(); + }} + onCloseAutoFocus={(event) => { + // Prevent auto focus to avoid scroll handling issues + event.preventDefault(); + }} + onEscapeKeyDown={(event) => { + // Handle escape key gracefully + try { + // Default behavior + } catch (error) { + console.warn('Escape key handling error:', error); + event.preventDefault(); + } + }} + onPointerDownOutside={(event) => { + // Handle pointer events gracefully + try { + // Default behavior + } catch (error) { + console.warn('Pointer down outside error:', error); + event.preventDefault(); + } + }} > <div className="flex flex-col h-full"> {/* Header Section */} |