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.tsx110
1 files changed, 81 insertions, 29 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index d64061a..851f637 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
@@ -22,7 +22,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ThemeToggle } from "@/components/theme-toggle";
import {
Search,
ShoppingBag,
@@ -30,7 +30,6 @@ import {
User,
Menu,
Phone,
- Mail,
Truck,
RefreshCw,
Shield,
@@ -40,7 +39,7 @@ import {
export function Header() {
const [cartItems] = useState(3);
const [wishlistItems] = useState(5);
-
+
const categories = [
{
title: "Women",
@@ -73,6 +72,20 @@ export function Header() {
},
];
+ // Preload both logo variants to ensure smooth loading
+ useEffect(() => {
+ const preloadLogos = () => {
+ if (typeof window !== 'undefined') {
+ const lightLogo = new window.Image();
+ const darkLogo = new window.Image();
+ lightLogo.src = '/black-logo.png';
+ darkLogo.src = '/white-logo.png';
+ }
+ };
+
+ preloadLogos();
+ }, []);
+
return (
<header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
{/* Top banner */}
@@ -83,20 +96,24 @@ export function Header() {
</div>
{/* Announcement bar */}
- <div className="bg-neutral-100 text-center py-2 px-4">
+ <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">
+ <div className="border-b dark:border-neutral-800">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
{/* Mobile menu */}
<Sheet>
<SheetTrigger asChild>
- <Button variant="ghost" size="icon" className="md:hidden">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="md:hidden nav-button-transparent backdrop-blur-sm"
+ >
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
@@ -128,12 +145,22 @@ export function Header() {
{/* 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 */}
<Image
src="/black-logo.png"
alt="blcklst"
width={120}
height={40}
- className="h-8 w-auto"
+ 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"
+ width={120}
+ height={40}
+ className="h-8 w-auto hidden dark:block"
priority
/>
</Link>
@@ -144,16 +171,18 @@ export function Header() {
<NavigationMenuList>
{categories.map((category) => (
<NavigationMenuItem key={category.title}>
- <NavigationMenuTrigger className="font-medium">
+ <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]">
+ <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 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+ 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>
@@ -165,7 +194,7 @@ export function Header() {
))}
<NavigationMenuItem>
<NavigationMenuLink asChild>
- <Link href="/sale" className="font-medium text-red-600 hover:text-red-700">
+ <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>
@@ -187,42 +216,57 @@ export function Header() {
{/* Action buttons */}
<div className="flex items-center space-x-2">
{/* Search icon for mobile */}
- <Button variant="ghost" size="icon" className="lg:hidden">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="lg:hidden nav-button-transparent backdrop-blur-sm"
+ >
<Search className="h-5 w-5" />
</Button>
+ {/* Theme toggle */}
+ <ThemeToggle />
+
{/* User menu */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
- <Button variant="ghost" size="icon">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="nav-button-transparent backdrop-blur-sm"
+ >
<User className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
- <DropdownMenuContent align="end" className="w-56">
- <DropdownMenuItem>
+ <DropdownMenuContent align="end" className="w-56 nav-dropdown-transparent">
+ <DropdownMenuItem className="nav-dropdown-item">
<User className="mr-2 h-4 w-4" />
My Account
</DropdownMenuItem>
- <DropdownMenuItem>
+ <DropdownMenuItem className="nav-dropdown-item">
<Truck className="mr-2 h-4 w-4" />
Orders
</DropdownMenuItem>
- <DropdownMenuItem>
+ <DropdownMenuItem className="nav-dropdown-item">
<Heart className="mr-2 h-4 w-4" />
Wishlist
</DropdownMenuItem>
- <DropdownMenuSeparator />
- <DropdownMenuItem>
+ <DropdownMenuSeparator className="bg-white/20 dark:bg-neutral-800/50" />
+ <DropdownMenuItem className="nav-dropdown-item">
Sign In
</DropdownMenuItem>
- <DropdownMenuItem>
+ <DropdownMenuItem className="nav-dropdown-item">
Create Account
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{/* Wishlist */}
- <Button variant="ghost" size="icon" className="relative">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="relative nav-button-transparent backdrop-blur-sm"
+ >
<Heart className="h-5 w-5" />
{wishlistItems > 0 && (
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
@@ -232,7 +276,11 @@ export function Header() {
</Button>
{/* Cart */}
- <Button variant="ghost" size="icon" className="relative">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="relative nav-button-transparent backdrop-blur-sm"
+ >
<ShoppingBag className="h-5 w-5" />
{cartItems > 0 && (
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
@@ -244,14 +292,18 @@ export function Header() {
{/* Language/Currency */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
- <Button variant="ghost" size="icon">
+ <Button
+ variant="ghost"
+ size="icon"
+ className="nav-button-transparent backdrop-blur-sm"
+ >
<Globe className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
- <DropdownMenuContent align="end">
- <DropdownMenuItem>πŸ‡ΊπŸ‡Έ USD</DropdownMenuItem>
- <DropdownMenuItem>πŸ‡ͺπŸ‡Ί EUR</DropdownMenuItem>
- <DropdownMenuItem>πŸ‡¬πŸ‡§ GBP</DropdownMenuItem>
+ <DropdownMenuContent align="end" className="nav-dropdown-transparent">
+ <DropdownMenuItem className="nav-dropdown-item">πŸ‡ΊπŸ‡Έ USD</DropdownMenuItem>
+ <DropdownMenuItem className="nav-dropdown-item">πŸ‡ͺπŸ‡Ί EUR</DropdownMenuItem>
+ <DropdownMenuItem className="nav-dropdown-item">πŸ‡¬πŸ‡§ GBP</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -260,7 +312,7 @@ export function Header() {
</div>
{/* Service features */}
- <div className="hidden md:block border-b bg-neutral-50">
+ <div className="hidden md:block border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900">
<div className="container mx-auto px-4">
<div className="grid grid-cols-4 gap-4 py-2 text-xs text-muted-foreground">
<div className="flex items-center justify-center space-x-1">
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-16 10:45:53 +0000