diff options
Diffstat (limited to 'frontend/src/components/header.tsx')
| -rw-r--r-- | frontend/src/components/header.tsx | 421 |
1 files changed, 261 insertions, 160 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx index a8ddadc..b792767 100644 --- a/frontend/src/components/header.tsx +++ b/frontend/src/components/header.tsx @@ -3,6 +3,7 @@ import { useState, useEffect, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; +import { useTheme } from "next-themes"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; @@ -34,13 +35,17 @@ import { RefreshCw, Shield, Globe, + Sun, + Moon, } from "lucide-react"; export function Header() { const [cartItems] = useState(3); const [wishlistItems] = useState(5); const [isMounted, setIsMounted] = useState(false); + const [sheetError, setSheetError] = useState(false); const sheetRef = useRef<HTMLDivElement>(null); + const { setTheme, theme } = useTheme(); const categories = [ { @@ -81,14 +86,31 @@ export function Header() { // 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')) { + event.error?.message?.includes('handleScroll') || + event.error?.message?.includes('RemoveScrollSideCar') || + event.error?.message?.includes('shouldCancelEvent') || + event.error?.message?.includes('shouldPrevent')) { console.warn('Scroll handling error caught and suppressed:', event.error); event.preventDefault(); + setSheetError(true); + return false; + } + }; + + // Also add an unhandled rejection handler for async scroll errors + const handleUnhandledRejection = (event: PromiseRejectionEvent) => { + if (event.reason?.message?.includes('handleScroll') || + event.reason?.message?.includes('RemoveScrollSideCar') || + event.reason?.message?.includes('parameter 1 is not of type \'Node\'')) { + console.warn('Scroll promise rejection caught and suppressed:', event.reason); + event.preventDefault(); + setSheetError(true); return false; } }; window.addEventListener('error', handleError); + window.addEventListener('unhandledrejection', handleUnhandledRejection); const preloadLogos = () => { if (typeof window !== 'undefined') { @@ -103,9 +125,31 @@ export function Header() { return () => { window.removeEventListener('error', handleError); + window.removeEventListener('unhandledrejection', handleUnhandledRejection); }; }, []); + // Add scroll error prevention + useEffect(() => { + const sheetElement = sheetRef.current; + if (sheetElement) { + const handleScroll = (event: Event) => { + try { + // Allow default scroll behavior but catch any errors + } catch (error) { + console.warn('Sheet scroll error caught:', error); + event.preventDefault(); + } + }; + + sheetElement.addEventListener('scroll', handleScroll, { passive: false }); + + return () => { + sheetElement.removeEventListener('scroll', handleScroll); + }; + } + }, [isMounted]); + // Prevent hydration issues with Sheet component if (!isMounted) { return ( @@ -127,7 +171,7 @@ export function Header() { {/* 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"> + <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4 md:justify-between"> {/* Mobile menu placeholder */} <Button variant="ghost" @@ -139,8 +183,8 @@ export function Header() { </Button> {/* Logo */} - <div className="flex items-center"> - <Link href="/" className="flex items-center space-x-2"> + <div className="flex items-center flex-1 md:flex-initial justify-center md:justify-start"> + <Link href="/" className="flex items-center space-x-2 ml-8 md:ml-0"> <Image src="/black-logo.png" alt="blcklst" @@ -177,7 +221,7 @@ export function Header() { className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" disabled > - <ShoppingBag className="h-5 w-5" /> + <ShoppingBag className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" /> </Button> </div> </div> @@ -206,173 +250,231 @@ export function Header() { {/* 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"> + <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4 md:justify-between"> {/* Mobile menu */} - <Sheet> - <SheetTrigger asChild> - <Button - variant="ghost" - size="icon" - className="md:hidden nav-button-transparent backdrop-blur-sm" - > - <Menu className="h-5 w-5" /> - </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); + {!sheetError ? ( + <Sheet> + <SheetTrigger asChild> + <Button + variant="ghost" + size="icon" + className="md:hidden nav-button-transparent backdrop-blur-sm" + > + <Menu className="h-5 w-5" /> + </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(); - } - }} - onPointerDownOutside={(event) => { - // Handle pointer events gracefully - try { - // Default behavior - } catch (error) { - console.warn('Pointer down outside error:', error); + }} + onCloseAutoFocus={(event) => { + // Prevent auto focus to avoid scroll handling issues event.preventDefault(); - } - }} - > - <div className="flex flex-col h-full"> - {/* Header Section */} - <SheetHeader className="px-6 py-4 border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900"> - <SheetTitle className="text-left text-lg font-semibold"> - Menu - </SheetTitle> - </SheetHeader> + }} + onEscapeKeyDown={(event) => { + // Handle escape key gracefully + try { + // Default behavior + } catch (error) { + console.warn('Escape key handling error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onPointerDownOutside={(event) => { + // Handle pointer events gracefully + try { + // Default behavior + } catch (error) { + console.warn('Pointer down outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onInteractOutside={(event) => { + // Additional interaction handler + try { + // Default behavior + } catch (error) { + console.warn('Interact outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onFocusOutside={(event) => { + // Additional focus handler + try { + // Default behavior + } catch (error) { + console.warn('Focus outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + > + <div className="flex flex-col h-full"> + {/* Header Section */} + <SheetHeader className="px-6 py-4 border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900"> + <SheetTitle className="text-left text-lg font-semibold"> + Menu + </SheetTitle> + </SheetHeader> - {/* Navigation Section */} - <div className="flex-1 overflow-y-auto"> - <nav className="px-4 py-6 space-y-6"> - {categories.map((category) => ( - <div key={category.title} className="space-y-3"> - {/* Category Header */} - <h3 className="px-2 text-sm font-semibold text-foreground uppercase tracking-wider border-b border-neutral-200 dark:border-neutral-700 pb-2"> - {category.title} - </h3> - - {/* Category Items */} - <div className="space-y-1"> - {category.items.map((item) => ( - <Link - key={item.name} - href={item.href} - className="flex items-center px-3 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]" - > - <span className="flex-1">{item.name}</span> - <svg - className="w-4 h-4 opacity-40" - fill="none" - stroke="currentColor" - viewBox="0 0 24 24" + {/* Navigation Section */} + <div className="flex-1 overflow-y-auto mobile-nav-scroll"> + <nav className="px-4 py-6 space-y-6"> + {categories.map((category) => ( + <div key={category.title} className="space-y-3"> + {/* Category Header */} + <h3 className="px-2 text-sm font-semibold text-foreground uppercase tracking-wider border-b border-neutral-200 dark:border-neutral-700 pb-2"> + {category.title} + </h3> + + {/* Category Items */} + <div className="space-y-1"> + {category.items.map((item) => ( + <Link + key={item.name} + href={item.href} + className="flex items-center px-3 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors touch-manipulation min-h-[44px]" > - <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> - </svg> - </Link> - ))} + <span className="flex-1">{item.name}</span> + <svg + className="w-4 h-4 opacity-40" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" + > + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> + </svg> + </Link> + ))} + </div> </div> + ))} + + {/* Sale Section */} + <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700"> + <h3 className="px-2 text-sm font-semibold text-red-600 uppercase tracking-wider"> + Special + </h3> + <Link + href="/sale" + className="flex items-center px-3 py-3 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-colors touch-manipulation min-h-[44px]" + > + <span className="flex-1">Sale Items</span> + <svg + className="w-4 h-4" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" + > + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> + </svg> + </Link> </div> - ))} + </nav> + </div> - {/* Sale Section */} - <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700"> - <h3 className="px-2 text-sm font-semibold text-red-600 uppercase tracking-wider"> - Special - </h3> - <Link - href="/sale" - className="flex items-center px-3 py-3 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]" + {/* Footer Section */} + <div className="border-t dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-4 py-4"> + <div className="grid grid-cols-2 gap-3"> + {/* Search Button */} + <Button + variant="outline" + size="sm" + className="flex items-center justify-center gap-2 h-10 text-xs font-medium" > - <span className="flex-1">Sale Items</span> - <svg - className="w-4 h-4" - fill="none" - stroke="currentColor" - viewBox="0 0 24 24" - > - <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> - </svg> - </Link> + <Search className="h-4 w-4" /> + Search + </Button> + + {/* Account Button */} + <Button + variant="outline" + size="sm" + className="flex items-center justify-center gap-2 h-10 text-xs font-medium" + > + <User className="h-4 w-4" /> + Account + </Button> </div> - </nav> - </div> - - {/* Footer Section */} - <div className="border-t dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-4 py-4"> - <div className="grid grid-cols-2 gap-3"> - {/* Search Button */} - <Button - variant="outline" - size="sm" - className="flex items-center justify-center gap-2 h-10 text-xs font-medium" - > - <Search className="h-4 w-4" /> - Search - </Button> - - {/* Account Button */} - <Button - variant="outline" - size="sm" - className="flex items-center justify-center gap-2 h-10 text-xs font-medium" - > - <User className="h-4 w-4" /> - Account - </Button> - </div> - - {/* Quick Actions */} - <div className="flex items-center justify-center space-x-6 mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700"> - <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative"> - <Heart className="h-5 w-5 text-muted-foreground" /> - <span className="text-xs text-muted-foreground">Wishlist</span> - {wishlistItems > 0 && ( - <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs"> - {wishlistItems} - </Badge> - )} - </button> - <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative"> - <ShoppingBag className="h-5 w-5 text-muted-foreground" /> - <span className="text-xs text-muted-foreground">Cart</span> - {cartItems > 0 && ( - <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs"> - {cartItems} - </Badge> - )} - </button> - - <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"> - <Globe className="h-5 w-5 text-muted-foreground" /> - <span className="text-xs text-muted-foreground">USD</span> - </button> + {/* Quick Actions */} + <div className="grid grid-cols-4 gap-1 mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700"> + <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700"> + <div className="relative"> + <Heart className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" /> + {wishlistItems > 0 && ( + <Badge className="absolute -top-2 -right-2 h-4 w-4 rounded-full p-0 text-[10px] leading-none"> + {wishlistItems} + </Badge> + )} + </div> + <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Wishlist</span> + </button> + + <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700"> + <div className="relative"> + <ShoppingBag className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" /> + {cartItems > 0 && ( + <Badge className="absolute -top-2 -right-2 h-4 w-4 rounded-full p-0 text-[10px] leading-none"> + {cartItems} + </Badge> + )} + </div> + <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Cart</span> + </button> + + {/* Theme Toggle in Mobile Menu */} + <button + onClick={() => { + if (theme === 'dark') { + setTheme('light'); + } else { + setTheme('dark'); + } + }} + className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700" + > + <div className="relative"> + {theme === 'dark' ? ( + <Moon className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" /> + ) : ( + <Sun className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" /> + )} + </div> + <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Theme</span> + </button> + + <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700"> + <div className="relative"> + <Globe className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" /> + </div> + <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">USD</span> + </button> + </div> </div> </div> - </div> - </SheetContent> - </Sheet> + </SheetContent> + </Sheet> + ) : ( + <Button + variant="ghost" + size="icon" + className="md:hidden nav-button-transparent backdrop-blur-sm" + > + <Menu className="h-5 w-5" /> + </Button> + )} {/* Logo */} - <div className="flex items-center"> - <Link href="/" className="flex items-center space-x-2"> - {/* Light theme logo - visible by default, hidden in dark mode */} + <div className="flex items-center flex-1 md:flex-initial justify-center md:justify-start"> + <Link href="/" className="flex items-center space-x-2 ml-8 md:ml-0"> <Image src="/black-logo.png" alt="blcklst" @@ -381,7 +483,6 @@ export function Header() { className="h-8 w-auto block dark:hidden" priority /> - {/* Dark theme logo - hidden by default, visible in dark mode */} <Image src="/white-logo.png" alt="blcklst" @@ -441,7 +542,7 @@ export function Header() { </div> {/* Action buttons */} - <div className="flex items-center space-x-1 sm:space-x-2"> + <div className="flex items-center space-x-1 sm:space-x-2 flex-shrink-0"> {/* Search icon for mobile */} <Button variant="ghost" @@ -510,7 +611,7 @@ export function Header() { size="icon" className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > - <ShoppingBag className="h-5 w-5" /> + <ShoppingBag className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" /> {cartItems > 0 && ( <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs"> {cartItems} |