base profile

src/share/components/Menu.tsx

@@ -2,6 +2,7 @@
 import { HambergerMenu, ArrowLeft2 } from 'iconsax-react'
 import { FC, useState, useRef, useEffect } from 'react'
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import { useGetCategories } from '../hooks/useShareData'
 import { Category } from '../types/SharedTypes'
 
@@ -10,6 +11,7 @@ const Menu: FC = () => {
     const [hoveredPath, setHoveredPath] = useState<Category[]>([])
     const { data, isLoading } = useGetCategories()
     const menuRef = useRef<HTMLDivElement>(null)
+    const router = useRouter()
 
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -30,6 +32,12 @@ const Menu: FC = () => {
         setHoveredPath(newPath)
     }
 
+    const handleCategoryClick = (category: Category) => {
+        router.push(`/products/${category.title_en}`)
+        setIsOpen(false)
+        setHoveredPath([])
+    }
+
     const renderCategoryLevel = (categories: Category[], level: number) => {
         return (
             <div className='w-64 border-l border-gray-200 last:border-l-0 flex flex-col min-h-0'>
@@ -40,6 +48,7 @@ const Menu: FC = () => {
                             className={`p-3 rounded-lg cursor-pointer transition-colors hover:bg-gray-50 ${hoveredPath[level]?._id === category._id ? 'bg-gray-50' : ''
                                 }`}
                             onMouseEnter={() => handleCategoryHover(category, level)}
+                            onClick={() => handleCategoryClick(category)}
                         >
                             <div className='flex items-center gap-3'>
                                 {category.icon && (