aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/header.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/header.tsx')
-rw-r--r--frontend/src/components/header.tsx667
1 files changed, 274 insertions, 393 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index b792767..566ea71 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -42,8 +42,6 @@ import {
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();
@@ -69,49 +67,19 @@ export function Header() {
],
},
{
- title: "Kids",
+ title: "Unisex",
items: [
- { name: "Boys", href: "/kids/boys" },
- { name: "Girls", href: "/kids/girls" },
- { name: "Baby", href: "/kids/baby" },
- { name: "Shoes", href: "/kids/shoes" },
+ { name: "Hoodies & Sweatshirts", href: "/unisex/hoodies" },
+ { name: "T-Shirts", href: "/unisex/tshirts" },
+ { name: "Jeans & Pants", href: "/unisex/pants" },
+ { name: "Outerwear", href: "/unisex/outerwear" },
+ { name: "Accessories", href: "/unisex/accessories" },
],
},
];
- // Preload both logo variants to ensure smooth loading
+ // Preload logos for 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') ||
- 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') {
const lightLogo = new window.Image();
@@ -122,117 +90,10 @@ export function Header() {
};
preloadLogos();
-
- 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 (
- <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 md:justify-between">
- {/* 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 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"
- 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-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" />
- </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">
+ <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60" suppressHydrationWarning>
{/* Top banner */}
<div className="bg-black text-white text-center py-2 px-4">
<p className="text-sm font-medium">
@@ -252,229 +113,235 @@ export function Header() {
<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 md:justify-between">
{/* Mobile menu */}
- {!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();
- }}
- 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();
- 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);
- }
- }}
+ <Sheet>
+ <SheetTrigger asChild>
+ <Button
+ variant="ghost"
+ size="icon"
+ className="md:hidden nav-button-transparent cursor-pointer"
>
- <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>
+ <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"
+ >
+ <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 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]"
+ {/* 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]"
+ >
+ <span className="flex-1">{item.name}</span>
+ <svg
+ className="w-4 h-4 opacity-40"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
>
- <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>
+ <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]"
+ {/* 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"
>
- <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>
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+ </svg>
+ </Link>
+ </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"
+ {/* More 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-foreground uppercase tracking-wider">
+ More
+ </h3>
+ <Link
+ href="/about"
+ 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]"
>
- <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"
+ <span className="flex-1">About Us</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>
+ <Link
+ href="/contact"
+ 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]"
>
- <User className="h-4 w-4" />
- Account
- </Button>
- </div>
-
- {/* 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"
+ <span className="flex-1">Contact</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>
+ <Link
+ href="/size-guide"
+ 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]"
>
- <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>
+ <span className="flex-1">Size Guide</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>
+ <Link
+ href="/help"
+ 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]"
+ >
+ <span className="flex-1">Help & FAQ</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>
+ </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="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"
+ suppressHydrationWarning
+ >
+ <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>
- </SheetContent>
- </Sheet>
- ) : (
- <Button
- variant="ghost"
- size="icon"
- className="md:hidden nav-button-transparent backdrop-blur-sm"
- >
- <Menu className="h-5 w-5" />
- </Button>
- )}
+ </div>
+ </SheetContent>
+ </Sheet>
{/* Logo */}
<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">
+ <Link href="/" className="flex items-center space-x-2 ml-8 md:ml-0" suppressHydrationWarning>
<Image
src="/black-logo.png"
alt="blcklst"
@@ -495,40 +362,54 @@ export function Header() {
</div>
{/* Desktop Navigation */}
- <NavigationMenu className="hidden md:flex">
- <NavigationMenuList>
- {categories.map((category) => (
- <NavigationMenuItem key={category.title}>
- <NavigationMenuTrigger
- className="font-medium nav-button-transparent backdrop-blur-sm"
- >
- {category.title}
- </NavigationMenuTrigger>
- <NavigationMenuContent>
- <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] nav-dropdown-transparent">
- {category.items.map((item) => (
- <NavigationMenuLink key={item.name} asChild>
- <Link
- href={item.href}
- className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors nav-dropdown-item backdrop-blur-sm"
- >
- <div className="text-sm font-medium leading-none">{item.name}</div>
- </Link>
- </NavigationMenuLink>
- ))}
- </div>
- </NavigationMenuContent>
+ <div className="hidden md:flex">
+ <NavigationMenu
+ className="w-full"
+ delayDuration={150}
+ skipDelayDuration={250}
+ >
+ <NavigationMenuList>
+ {categories.map((category) => (
+ <NavigationMenuItem key={category.title} value={category.title}>
+ <NavigationMenuTrigger
+ className="font-medium nav-button-transparent text-foreground hover:text-foreground/90 transition-all duration-200 group cursor-pointer"
+ aria-haspopup="true"
+ >
+ {category.title}
+ </NavigationMenuTrigger>
+ <NavigationMenuContent
+ className="data-[motion=from-start]:animate-in data-[motion=from-end]:animate-in data-[motion=to-start]:animate-out data-[motion=to-end]:animate-out data-[motion=from-start]:slide-in-from-left-52 data-[motion=from-end]:slide-in-from-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion=to-end]:slide-out-to-right-52"
+ >
+ <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] nav-dropdown-transparent">
+ {category.items.map((item) => (
+ <NavigationMenuLink key={item.name} asChild>
+ <Link
+ href={item.href}
+ className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors nav-dropdown-item group"
+ >
+ <div className="text-sm font-medium leading-none group-hover:text-foreground transition-colors">
+ {item.name}
+ </div>
+ <p className="line-clamp-2 text-xs leading-snug text-muted-foreground group-hover:text-foreground/80 transition-colors mt-1">
+ Discover our latest {item.name.toLowerCase()} collection
+ </p>
+ </Link>
+ </NavigationMenuLink>
+ ))}
+ </div>
+ </NavigationMenuContent>
+ </NavigationMenuItem>
+ ))}
+ <NavigationMenuItem>
+ <NavigationMenuLink asChild>
+ <Link href="/sale" className="font-medium text-red-600 hover:text-red-700 px-4 py-2 rounded-md nav-button-transparent transition-colors cursor-pointer">
+ Sale
+ </Link>
+ </NavigationMenuLink>
</NavigationMenuItem>
- ))}
- <NavigationMenuItem>
- <NavigationMenuLink asChild>
- <Link href="/sale" className="font-medium text-red-600 hover:text-red-700 px-4 py-2 rounded-md nav-button-transparent backdrop-blur-sm transition-colors">
- Sale
- </Link>
- </NavigationMenuLink>
- </NavigationMenuItem>
- </NavigationMenuList>
- </NavigationMenu>
+ </NavigationMenuList>
+ </NavigationMenu>
+ </div>
{/* Search Bar */}
<div className="hidden lg:flex flex-1 max-w-sm mx-8">
@@ -547,13 +428,13 @@ export function Header() {
<Button
variant="ghost"
size="icon"
- className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+ className="lg:hidden nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
>
<Search className="h-5 w-5" />
</Button>
{/* Theme toggle */}
- <div className="hidden sm:block">
+ <div className="hidden sm:block" suppressHydrationWarning>
<ThemeToggle />
</div>
@@ -563,7 +444,7 @@ export function Header() {
<Button
variant="ghost"
size="icon"
- className="hidden sm:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+ className="hidden sm:flex nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
>
<User className="h-5 w-5" />
</Button>
@@ -595,7 +476,7 @@ export function Header() {
<Button
variant="ghost"
size="icon"
- className="relative hidden xs:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+ className="relative hidden xs:flex nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
>
<Heart className="h-5 w-5" />
{wishlistItems > 0 && (
@@ -609,7 +490,7 @@ export function Header() {
<Button
variant="ghost"
size="icon"
- className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+ className="relative nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
>
<ShoppingBag className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" />
{cartItems > 0 && (
@@ -625,7 +506,7 @@ export function Header() {
<Button
variant="ghost"
size="icon"
- className="hidden md:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+ className="hidden md:flex nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
>
<Globe className="h-5 w-5" />
</Button>
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-15 23:05:17 +0000