From 92ab3f26c4492e7786fc57f4bb47fd24e6d5ab40 Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 20:13:39 +0530
Subject: feat: added the mobile friendly ui implimentation

- added nav bar and added the morden layout to it
- added mobile friendly css for responsiveness
- added more other components to it
---
 frontend/src/components/header.tsx | 165 ++++++++++++++++++++++++++++++-------
 1 file changed, 133 insertions(+), 32 deletions(-)

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

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