hamid zarghami
115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
'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'
|
|
import { PRIMARY_COLOR } from '@/config/const'
|
|
import ChatbotWidget from '@/app/chatbot/components/ChatbotWidget'
|
|
|
|
const MobileBottomMenu: FC = () => {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)
|
|
const [isChatbotOpen, setIsChatbotOpen] = 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: 'پروفایل',
|
|
path: '/profile',
|
|
onClick: () => handleNavigation(isLogin ? '/profile' : '/auth')
|
|
},
|
|
{
|
|
icon: MessageText,
|
|
label: 'چت',
|
|
path: '/profile/chat',
|
|
onClick: () => setIsChatbotOpen(true)
|
|
},
|
|
{
|
|
icon: ShoppingCart,
|
|
label: 'سبد خرید',
|
|
path: '/cart',
|
|
badge: cartCount,
|
|
onClick: () => handleNavigation('/cart')
|
|
},
|
|
{
|
|
icon: HambergerMenu,
|
|
label: 'منو',
|
|
path: '',
|
|
onClick: () => setIsCategoryModalOpen(!isCategoryModalOpen)
|
|
},
|
|
{
|
|
icon: Home,
|
|
label: 'خانه',
|
|
path: '/',
|
|
onClick: () => handleNavigation('/')
|
|
},
|
|
]
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile Bottom Menu */}
|
|
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden">
|
|
<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 ${isActive ? 'text-primary' : 'text-gray-600'
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<IconComponent
|
|
size={24}
|
|
color={isActive ? PRIMARY_COLOR : '#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>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Modal */}
|
|
<CategoryModal
|
|
isOpen={isCategoryModalOpen}
|
|
onClose={() => setIsCategoryModalOpen(false)}
|
|
/>
|
|
|
|
{/* Chatbot Widget */}
|
|
<ChatbotWidget
|
|
isOpen={isChatbotOpen}
|
|
onClose={() => setIsChatbotOpen(false)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MobileBottomMenu
|