diff --git a/src/components/MobileBottomMenu.tsx b/src/components/MobileBottomMenu.tsx index 4d2ecd4..d767e18 100644 --- a/src/components/MobileBottomMenu.tsx +++ b/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 = () => {
{menuItems.map((item, index) => { const IconComponent = item.icon + const isActive = item.path ? pathname === item.path : false + return ( ) diff --git a/src/share/Header.tsx b/src/share/Header.tsx index 9514869..5b6d5b2 100644 --- a/src/share/Header.tsx +++ b/src/share/Header.tsx @@ -2,7 +2,7 @@ import Input from '@/components/Input' import MenuItem from '@/components/MenuItem' import { Separator } from '@/components/ui/separator' -import { DocumentText, Home, Profile, HambergerMenu, InfoCircle, Messages1 } from 'iconsax-react' +import { DocumentText, Home, InfoCircle, Messages1, SearchNormal1 } from 'iconsax-react' import { FC, Fragment, useEffect, useState } from 'react' import Menu from './components/Menu' import { useSharedStore } from './store/sharedStore' @@ -14,7 +14,7 @@ import Link from 'next/link' const Header: FC = () => { - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) + const [isSearchOpen, setIsSearchOpen] = useState(false) const { setIsLogin } = useSharedStore() const handleSetIsLogin = async () => { @@ -30,19 +30,47 @@ const Header: FC = () => { return (
- {/* بخش بالایی هدر */} -
- {/* منوی همبرگری موبایل */} -
- -
+ {/* موبایل: لوگو و آیکون جستجو */} +
+ {!isSearchOpen ? ( +
+ + logo + + +
+ ) : ( +
+ + +
+ )} +
-
+ {/* دسکتاپ: هدر کامل */} +
+
{ />
-
+
-
- -
- - +
- {/* نوار جستجو موبایل */} -
- -
- {/* بخش پایینی هدر - فقط دسکتاپ */}
@@ -119,7 +134,7 @@ const Header: FC = () => {
{/* منوی موبایل */} - {isMobileMenuOpen && ( + {/* {isMobileMenuOpen && (
@@ -154,11 +169,11 @@ const Header: FC = () => {
- )} + )} */}
{/* فضای خالی برای جبران ارتفاع fixed header */} -
+
) }