aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/header.tsx165
-rw-r--r--frontend/src/components/theme-toggle.tsx79
2 files changed, 196 insertions, 48 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>
diff --git a/frontend/src/components/theme-toggle.tsx b/frontend/src/components/theme-toggle.tsx
index 17df44e..53d8286 100644
--- a/frontend/src/components/theme-toggle.tsx
+++ b/frontend/src/components/theme-toggle.tsx
@@ -14,6 +14,26 @@ import {
export function ThemeToggle() {
const { setTheme, theme } = useTheme()
+ const [mounted, setMounted] = React.useState(false)
+
+ // Ensure we only render the correct icon after mounting to avoid hydration mismatch
+ React.useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ if (!mounted) {
+ return (
+ <Button
+ variant="ghost"
+ size="icon"
+ className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95"
+ disabled
+ >
+ <Monitor className="h-[1.1rem] w-[1.1rem] text-muted-foreground/60" />
+ <span className="sr-only">Toggle theme</span>
+ </Button>
+ )
+ }
return (
<DropdownMenu>
@@ -21,28 +41,55 @@ export function ThemeToggle() {
<Button
variant="ghost"
size="icon"
- className="nav-button-transparent backdrop-blur-sm"
+ className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 group"
>
- <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
- <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+ {/* Enhanced icon transitions with better positioning */}
+ <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all duration-500 ease-in-out dark:-rotate-180 dark:scale-0 text-amber-500 dark:text-amber-400 group-hover:text-amber-600 dark:group-hover:text-amber-300" />
+ <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-180 scale-0 transition-all duration-500 ease-in-out dark:rotate-0 dark:scale-100 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" />
+
+ {/* Subtle background glow effect on hover */}
+ <div className="absolute inset-0 rounded-full bg-gradient-to-r from-amber-500/0 to-blue-500/0 group-hover:from-amber-500/10 group-hover:to-blue-500/10 dark:group-hover:from-amber-400/10 dark:group-hover:to-blue-400/10 transition-all duration-300" />
+
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
- <DropdownMenuContent align="end" className="nav-dropdown-transparent">
- <DropdownMenuItem onClick={() => setTheme("light")} className="flex items-center gap-2 nav-dropdown-item">
- <Sun className="h-4 w-4" />
- Light
- {theme === "light" && <span className="ml-auto text-xs">✓</span>}
+
+ <DropdownMenuContent
+ align="end"
+ className="nav-dropdown-transparent min-w-[140px] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
+ sideOffset={8}
+ >
+ <DropdownMenuItem
+ onClick={() => setTheme("light")}
+ className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+ >
+ <Sun className="h-4 w-4 text-amber-500 group-hover/item:text-amber-600 transition-colors duration-200" />
+ <span className="flex-1">Light</span>
+ {theme === "light" && (
+ <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+ )}
</DropdownMenuItem>
- <DropdownMenuItem onClick={() => setTheme("dark")} className="flex items-center gap-2 nav-dropdown-item">
- <Moon className="h-4 w-4" />
- Dark
- {theme === "dark" && <span className="ml-auto text-xs">✓</span>}
+
+ <DropdownMenuItem
+ onClick={() => setTheme("dark")}
+ className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+ >
+ <Moon className="h-4 w-4 text-blue-600 dark:text-blue-400 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-300 transition-colors duration-200" />
+ <span className="flex-1">Dark</span>
+ {theme === "dark" && (
+ <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+ )}
</DropdownMenuItem>
- <DropdownMenuItem onClick={() => setTheme("system")} className="flex items-center gap-2 nav-dropdown-item">
- <Monitor className="h-4 w-4" />
- System
- {theme === "system" && <span className="ml-auto text-xs">✓</span>}
+
+ <DropdownMenuItem
+ onClick={() => setTheme("system")}
+ className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+ >
+ <Monitor className="h-4 w-4 text-slate-600 dark:text-slate-400 group-hover/item:text-slate-700 dark:group-hover/item:text-slate-300 transition-colors duration-200" />
+ <span className="flex-1">System</span>
+ {theme === "system" && (
+ <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+ )}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-16 16:46:44 +0000