feat: dropdown on hover (#667)

* feat: dropdown on hover * fix: add timeout
SigNoz · Aug 22, 2024 · 960d3a2 · 960d3a2
1 parent 612cb22
commit 960d3a2
Showing 1 changed file with 30 additions and 2 deletions.
diff --git a/components/TopNav/TopNav.tsx b/components/TopNav/TopNav.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Button, Dialog, Popover } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
@@ -64,6 +64,22 @@ export default function TopNav() {
     }
   }, [pathname])
 
+  const [isOpen, setIsOpen] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null); 
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 1);
+  };
+
   return (
     <div className="fixed left-0 right-0 z-30">
 
@@ -93,10 +109,21 @@ export default function TopNav() {
               <span className="text-[17.111px] font-medium">SigNoz</span>
             </Link>
             <Popover.Group className="hidden items-center gap-x-6 lg:flex">
-              <Dropdown>
+              <div
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+              >
+
+              <Dropdown isOpen={isOpen}>
                 <DropdownTrigger>
                   <Button
                     className="truncate px-1.5 py-1 text-sm font-normal hover:text-signoz_robin-500"
+                    onMouseEnter={() => {
+                      setIsOpen(true);
+                    }}
+                    onMouseLeave={() => {
+                      setIsOpen(false);
+                    }}
                   >
                     <div className='flex items-center'>
 
@@ -192,6 +219,7 @@ export default function TopNav() {
                   </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
+              </div>
 
               <Link
                 href="/docs"