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.tsx165
1 files changed, 133 insertions, 32 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index 851f637..475c1f3 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -104,8 +104,8 @@ export function Header() {
{/* Main header */}
<div className="border-b dark:border-neutral-800">
- <div className="container mx-auto px-4">
- <div className="flex h-16 items-center justify-between">
+ <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 */}
<Sheet>
<SheetTrigger asChild>
@@ -117,28 +117,127 @@ export function Header() {
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
- <SheetContent side="left" className="w-[300px] sm:w-[400px]">
- <SheetHeader>
- <SheetTitle>Menu</SheetTitle>
- </SheetHeader>
- <nav className="mt-6 space-y-4">
- {categories.map((category) => (
- <div key={category.title} className="space-y-2">
- <h3 className="font-semibold">{category.title}</h3>
- <div className="ml-4 space-y-1">
- {category.items.map((item) => (
- <Link
- key={item.name}
- href={item.href}
- className="block py-1 text-sm text-muted-foreground hover:text-foreground"
+ <SheetContent
+ 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">
+ <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"
+ >
+ <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-all duration-200 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"
>
- {item.name}
- </Link>
- ))}
+ <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>
- ))}
- </nav>
+
+ {/* 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>
+ </div>
+ </div>
+ </div>
</SheetContent>
</Sheet>
@@ -214,26 +313,28 @@ export function Header() {
</div>
{/* Action buttons */}
- <div className="flex items-center space-x-2">
+ <div className="flex items-center space-x-1 sm:space-x-2">
{/* Search icon for mobile */}
<Button
variant="ghost"
size="icon"
- className="lg:hidden nav-button-transparent backdrop-blur-sm"
+ className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
>
<Search className="h-5 w-5" />
</Button>
{/* Theme toggle */}
- <ThemeToggle />
+ <div className="hidden sm:block">
+ <ThemeToggle />
+ </div>
- {/* User menu */}
+ {/* User menu - Hidden on small mobile, visible on larger screens */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
- className="nav-button-transparent backdrop-blur-sm"
+ className="hidden sm:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
>
<User className="h-5 w-5" />
</Button>
@@ -261,11 +362,11 @@ export function Header() {
</DropdownMenuContent>
</DropdownMenu>
- {/* Wishlist */}
+ {/* Wishlist - Hidden on small mobile */}
<Button
variant="ghost"
size="icon"
- className="relative nav-button-transparent backdrop-blur-sm"
+ className="relative hidden xs:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
>
<Heart className="h-5 w-5" />
{wishlistItems > 0 && (
@@ -275,11 +376,11 @@ export function Header() {
)}
</Button>
- {/* Cart */}
+ {/* Cart - Always visible */}
<Button
variant="ghost"
size="icon"
- className="relative nav-button-transparent backdrop-blur-sm"
+ className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
>
<ShoppingBag className="h-5 w-5" />
{cartItems > 0 && (
@@ -289,13 +390,13 @@ export function Header() {
)}
</Button>
- {/* Language/Currency */}
+ {/* Language/Currency - Hidden on mobile */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
- className="nav-button-transparent backdrop-blur-sm"
+ className="hidden md:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
>
<Globe className="h-5 w-5" />
</Button>
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-15 23:07:32 +0000