changed some color and fix some styles

components/layout/MobileBar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Menu, Heart, Truck, ShoppingCart, User } from "lucide-react";
+import { Menu, Heart, Truck, ShoppingCart, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -15,9 +15,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { useCategories, useFavorites, useOrders } from "@/lib/hooks";
 import { useCartCount } from "@/features/cart/hooks/useCart";
 import { useRouter } from "next/navigation";
-import { useAuthStatus } from "@/lib/hooks/useAuth";
 import { useTranslations } from "next-intl";
-import AuthDialog from "./ui/AuthDialog";
 
 interface MobileBottomNavProps {
   locale?: string;
@@ -39,10 +37,39 @@ export default function MobileBottomNav({
 }: MobileBottomNavProps) {
   const [isClient, setIsClient] = useState(false);
   const [isCategoryOpen, setIsCategoryOpen] = useState(false);
-  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState<Set<number>>(
+    new Set(),
+  );
+  const [touchStart, setTouchStart] = useState<number | null>(null);
   const t = useTranslations();
 
-  const { isAuthenticated, isLoading: authLoading } = useAuthStatus();
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (touchStart === null) return;
+    const touchEnd = e.changedTouches[0].clientX;
+    const distance = touchStart - touchEnd;
+
+    // Side is left, so swiping left (negative delta or positive distance) closes it
+    if (distance > 50) {
+      setIsCategoryOpen(false);
+    }
+    setTouchStart(null);
+  };
+
+  const toggleCategory = (categoryId: number) => {
+    setExpandedCategories((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(categoryId)) {
+        newSet.delete(categoryId);
+      } else {
+        newSet.add(categoryId);
+      }
+      return newSet;
+    });
+  };
 
   const { data: categories = [] } = useCategories();
 
@@ -56,25 +83,6 @@ export default function MobileBottomNav({
     setIsClient(true);
   }, []);
 
-  const handleProfileClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (authLoading) {
-      return;
-    }
-
-    if (isAuthenticated) {
-      router.push(`/${locale}/me`);
-    } else {
-      if (onLoginClick) {
-        onLoginClick();
-      } else {
-        setIsLoginOpen(true);
-      }
-    }
-  };
-
   const handleNavigation = (path: string) => (e: React.MouseEvent) => {
     e.preventDefault();
     router.push(path);
@@ -85,40 +93,39 @@ export default function MobileBottomNav({
   return (
     <>
       {/* Mobile Bottom Navigation */}
-      <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t shadow-lg lg:hidden">
+      <div className="fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-t border-gray-200 shadow-xl lg:hidden">
         <div className="flex items-center justify-around h-16 px-2">
           {/* Catalog Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="flex-col gap-0.5 h-auto px-2 py-2"
+            className="flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={() => {
               setIsCategoryOpen(true);
             }}
           >
-            <Menu className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">{t("common.catalog")}</span>
+            <Menu className="h-5 w-5 text-gray-700" />
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.catalog")}
+            </span>
           </Button>
 
           {/* Favorites Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/favorites")}
           >
             <div className="relative">
-              <Heart className="h-5 w-5 text-gray-600" />
+              <Heart className="h-5 w-5 text-gray-700" />
               {(favoritesData?.length || 0) > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {favoritesData?.length}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">
+            <span className="text-xs text-gray-700 font-medium">
               {t("common.favorites")}
             </span>
           </Button>
@@ -127,59 +134,52 @@ export default function MobileBottomNav({
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/orders")}
           >
             <div className="relative">
-              <Truck className="h-5 w-5 text-gray-600" />
+              <Truck className="h-5 w-5 text-gray-700" />
               {(ordersData?.length || 0) > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {ordersData?.length}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">{t("common.orders")}</span>
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.orders")}
+            </span>
           </Button>
 
-          {/* Cart Button - OPTIMIZED */}
+          {/* Cart Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/cart")}
           >
             <div className="relative">
-              <ShoppingCart className="h-5 w-5 text-gray-600" />
+              <ShoppingCart className="h-5 w-5 text-gray-700" />
               {cartCount > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {cartCount}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">{t("common.cart")}</span>
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.cart")}
+            </span>
           </Button>
 
-          {/* Profile/Login Button */}
+          {/* Info Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="flex-col gap-0.5 h-auto px-2 py-2"
-            onClick={handleProfileClick}
-            disabled={authLoading}
+            className="flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
+            onClick={() => router.push(`/${locale}/info`)}
           >
-            <User className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">
-              {authLoading
-                ? "..."
-                : isAuthenticated
-                ? t("common.profile")
-                : t("common.login")}
+            <Info className="h-5 w-5 text-gray-700" />
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.info")}
             </span>
           </Button>
         </div>
@@ -187,46 +187,80 @@ export default function MobileBottomNav({
 
       {/* Category Sheet/Drawer */}
       <Sheet open={isCategoryOpen} onOpenChange={setIsCategoryOpen}>
-        <SheetContent side="left" className="w-[300px] p-0">
-          <SheetHeader className="p-4 border-b">
-            <SheetTitle>{t("common.catalog")}</SheetTitle>
+        <SheetContent
+          side="left"
+          className="w-[300px] p-0 rounded-none border-r-2 border-gray-200"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
+          <SheetHeader className="p-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
+            <SheetTitle className="text-xl font-bold text-gray-900">
+              {t("common.catalog")}
+            </SheetTitle>
           </SheetHeader>
-          <ScrollArea className="h-[calc(100vh-80px)]">
+          <ScrollArea className="h-[calc(100vh-88px)]">
             <div className="p-4">
               {categories.map((category) => (
-                <div key={category.id} className="mb-4">
-                  <Link
-                    href={`/category/${category.slug}?category_id=${category.id}`}
-                    onClick={() => setIsCategoryOpen(false)}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors font-semibold"
-                  >
-                    <span>{category.name}</span>
-                  </Link>
+                <div key={category.id} className="mb-1">
+                  <div className="flex items-center">
+                    <Link
+                      href={`/category/${category.slug}?category_id=${category.id}`}
+                      onClick={() => setIsCategoryOpen(false)}
+                      className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-gray-100 transition-all font-bold text-gray-900 hover:text-gray-700"
+                    >
+                      <span>{category.name}</span>
+                    </Link>
+
+                    {/* Toggle button if has children */}
+                    {category.children && category.children.length > 0 && (
+                      <button
+                        onClick={() => toggleCategory(category.id)}
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      >
+                        <svg
+                          className={`w-4 h-4 text-gray-600 transition-transform ${
+                            expandedCategories.has(category.id)
+                              ? "rotate-180"
+                              : ""
+                          }`}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 9l-7 7-7-7"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
 
                   {/* Subcategories */}
-                  {category.children && category.children.length > 0 && (
-                    <div className="ml-8 mt-2 space-y-1">
-                      {category.children.map((child: any) => (
-                        <Link
-                          key={child.id}
-                          href={`/category/${child.slug}?category_id=${child.id}`}
-                          onClick={() => setIsCategoryOpen(false)}
-                          className="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg transition-colors"
-                        >
-                          {child.name}
-                        </Link>
-                      ))}
-                    </div>
-                  )}
+                  {category.children &&
+                    category.children.length > 0 &&
+                    expandedCategories.has(category.id) && (
+                      <div className="ml-6 mt-1 space-y-0.5">
+                        {category.children.map((child: any) => (
+                          <Link
+                            key={child.id}
+                            href={`/category/${child.slug}?category_id=${child.id}`}
+                            onClick={() => setIsCategoryOpen(false)}
+                            className="block px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all font-medium"
+                          >
+                            {child.name}
+                          </Link>
+                        ))}
+                      </div>
+                    )}
                 </div>
               ))}
             </div>
           </ScrollArea>
         </SheetContent>
       </Sheet>
-
-      {/* Local Auth Dialog  */}
-      <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
     </>
   );
 }