responsive base v1

2025-09-02 12:42:13 +03:30
parent c6b3aa0682
commit 2fa9ab1bbb
27 changed files with 581 additions and 178 deletions
@@ -0,0 +1,51 @@
+'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