onMouseEnter and onMouseLeave navbar

src/components/Dashboard/Menu/Item.tsx

@@ -9,6 +9,8 @@ export const DashboardMenuItem = ({
   isOpen = false,
   isActive = false,
   onToggle,
+  onMouseEnter,
+  onMouseLeave,
   hasChildren = false,
 }: {
   label: string
@@ -17,6 +19,8 @@ export const DashboardMenuItem = ({
   isOpen?: boolean
   isActive?: boolean
   onToggle?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
   hasChildren?: boolean
 }) => (
   <Button
@@ -29,6 +33,8 @@ export const DashboardMenuItem = ({
     w='full'
     leftIcon={icon ? <Icon as={icon} /> : undefined}
     rightIcon={hasChildren ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
   >
     {label}
   </Button>

src/components/Navbar/index.tsx

@@ -14,7 +14,7 @@ import {
   useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { generatePath, Link as ReactRouterLink } from 'react-router-dom'
 import { useAuth } from '~components/Auth/useAuth'
@@ -67,37 +67,40 @@ const NavbarMenu = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void
 
 const NavbarMenuContent = () => {
   const { t } = useTranslation()
+  const ref = useRef()
   const useCasesItems = useCases()
   const [openSection, setOpenSection] = useState<string | null>(null)
   const isLargerThanXL = useBreakpointValue({ base: false, xl: true })
 
   const handleToggle = (label: string) => {
     setOpenSection((prev) => (prev === label ? null : label))
   }
+
   const menuItems: MenuItem[] = [
     {
       label: t('navbar.use_cases', { defaultValue: 'Use Cases' }),
+      route: Routes.useCases.root,
       children: useCasesItems,
     },
     {
       label: t('navbar.features', { defaultValue: 'Features' }),
-      route: '',
+      route: Routes.features,
     },
     {
       label: t('navbar.pricing', { defaultValue: 'Pricing' }),
-      route: '',
+      route: Routes.pricing,
     },
     {
       label: t('navbar.technolgy', { defaultValue: 'Technology' }),
-      route: '',
+      route: Routes.technology,
     },
     {
       label: t('navbar.demos', { defaultValue: 'Demos' }),
-      route: '',
+      route: Routes.demos,
     },
     {
       label: t('navbar.contact_us', { defaultValue: 'Contact Us' }),
-      route: '',
+      route: Routes.contactUs,
     },
   ]
 
@@ -111,16 +114,18 @@ const NavbarMenuContent = () => {
                 label={item.label}
                 route={item.route}
                 isOpen={isLargerThanXL ? openSection === item.label : true}
-                onToggle={() => handleToggle(item.label)}
+                onMouseEnter={() => handleToggle(item.label)}
+                onMouseLeave={() => setOpenSection(null)}
                 hasChildren
               />
-              <Collapse in={isLargerThanXL ? openSection === item.label : true}>
+              <Collapse ref={ref} in={isLargerThanXL ? openSection === item.label : true}>
                 <List
+                  onMouseEnter={() => handleToggle(item.label)}
+                  onMouseLeave={() => setOpenSection(null)}
                   zIndex={20}
                   position={{ base: 'relative', xl: 'absolute' }}
                   gap={6}
                   px={6}
-                  pt={{ base: 0, xl: 6 }}
                   bgColor={'navbar.bg_light'}
                   _dark={{ bgColor: 'navbar.bg_dark' }}
                 >

src/router/routes/index.ts

@@ -40,6 +40,7 @@ export const Routes = {
     web3: '/web3',
     sportClubs: '/sport-clubs',
   },
+  technology: '/technology',
   terms: '/terms',
 }