mobile header and footer

src/components/MobileBottomMenu.tsx

@@ -1,17 +1,61 @@
 'use client'
 import { FC, useState } from 'react'
 import { Profile, MessageText, ShoppingCart, HambergerMenu, Home } from 'iconsax-react'
+import { useRouter, usePathname } from 'next/navigation'
 import CategoryModal from './CategoryModal'
+import { useSharedStore } from '@/share/store/sharedStore'
+import { useLocalCart } from '@/app/product/hooks/useLocalCart'
+import { useGetCart } from '@/app/cart/hooks/useCartData'
 
 const MobileBottomMenu: FC = () => {
+    const router = useRouter()
+    const pathname = usePathname()
     const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)
+    const { isLogin } = useSharedStore()
+
+    // Get cart count based on login status
+    const { data: cartData } = useGetCart()
+    const { getLocalCartItemsCount } = useLocalCart()
+    const cartCount = isLogin
+        ? (cartData?.results?.cart?.items_count || 0)
+        : getLocalCartItemsCount()
+
+    const handleNavigation = (path: string) => {
+        router.push(path)
+    }
 
     const menuItems = [
-        { icon: Profile, label: 'پروفایل', active: false },
-        { icon: MessageText, label: 'چت', active: false },
-        { icon: ShoppingCart, label: 'سبد خرید', active: false },
-        { icon: HambergerMenu, label: 'منو', active: false, onClick: () => setIsCategoryModalOpen(!isCategoryModalOpen) },
-        { icon: Home, label: 'خانه', active: true },
+        {
+            icon: Profile,
+            label: 'پروفایل',
+            path: '/profile',
+            onClick: () => handleNavigation(isLogin ? '/profile' : '/auth')
+        },
+        {
+            icon: MessageText,
+            label: 'چت',
+            path: '/profile/chat',
+            onClick: () => handleNavigation(isLogin ? '/profile/chat' : '/auth')
+        },
+        {
+            icon: ShoppingCart,
+            label: 'سبد خرید',
+            path: '/cart',
+            badge: cartCount,
+            onClick: () => handleNavigation('/cart')
+        },
+        {
+            icon: HambergerMenu,
+            label: 'منو',
+            path: '',
+            onClick: () => setIsCategoryModalOpen(!isCategoryModalOpen)
+        },
+        {
+            icon: Home,
+            label: 'خانه',
+            path: '/',
+            onClick: () => handleNavigation('/')
+        },
     ]
 
     return (
@@ -21,17 +65,27 @@ const MobileBottomMenu: FC = () => {
                 <div className="flex items-center justify-around py-3 px-2">
                     {menuItems.map((item, index) => {
                         const IconComponent = item.icon
+                        const isActive = item.path ? pathname === item.path : false
+
                         return (
                             <button
                                 key={index}
                                 onClick={item.onClick}
-                                className={`flex flex-col items-center gap-1 p-2 min-w-0 flex-1 ${item.active ? 'text-purple-600' : 'text-gray-600'
+                                className={`flex flex-col items-center gap-1 p-2 min-w-0 flex-1 ${isActive ? 'text-purple-600' : 'text-gray-600'
                                     }`}
                             >
-                                <IconComponent
-                                    size={24}
-                                    color={item.active ? '#9333ea' : '#6b7280'}
-                                />
+                                <div className="relative">
+                                    <IconComponent
+                                        size={24}
+                                        color={isActive ? '#9333ea' : '#6b7280'}
+                                    />
+                                    {/* Badge for cart count */}
+                                    {item.badge !== undefined && (
+                                        <div className="absolute -top-1.5 -right-3 bg-primary text-white text-[10px] font-medium rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1 shadow-sm">
+                                            {item.badge}
+                                        </div>
+                                    )}
+                                </div>
                                 <span className="text-xs text-center leading-tight">{item.label}</span>
                             </button>
                         )