From 5e3b37288d96277a6eacb7d6464760b63f72874a Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 19:44:26 +0530
Subject: feat: improved UI and added dynamic theme toggle

- improved the nav bar components
- added the theme toggle button to toggle theme
- fixed the button background for the nav bar
- fixed the theme color issue to the ThemeToggle funtion
- added more vibrant colors
- fixed the theme logo render
---
 frontend/src/components/header.tsx | 110 +++++++++++++++++++++++++++----------
 1 file changed, 81 insertions(+), 29 deletions(-)

(limited to 'frontend/src/components/header.tsx')

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">
-- 
cgit v1.2.3-59-g8ed1b