hamid zarghami
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
'use client'
|
|
import { FC, useState } from 'react'
|
|
import { Profile, MessageText, ShoppingCart, HambergerMenu, Home } from 'iconsax-react'
|
|
import CategoryModal from './CategoryModal'
|
|
|
|
const MobileBottomMenu: FC = () => {
|
|
const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)
|
|
|
|
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 },
|
|
]
|
|
|
|
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
|
|
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'
|
|
}`}
|
|
>
|
|
<IconComponent
|
|
size={24}
|
|
color={item.active ? '#9333ea' : '#6b7280'}
|
|
/>
|
|
<span className="text-xs text-center leading-tight">{item.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Modal */}
|
|
<CategoryModal
|
|
isOpen={isCategoryModalOpen}
|
|
onClose={() => setIsCategoryModalOpen(false)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MobileBottomMenu
|