Merge pull request #12380 from ethereum/nav-delay

fix: nav item hover zone, opening delay duration
ethereum · Mar 6, 2024 · 45ef0d9 · 45ef0d9
2 parents 1b075bc + 48ee6c7
commit 45ef0d9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Nav/Menu/index.tsx b/src/components/Nav/Menu/index.tsx
@@ -4,7 +4,7 @@ import * as NavigationMenu from "@radix-ui/react-navigation-menu"
 
 import { Button } from "@/components/Buttons"
 
-import { SECTION_LABELS } from "@/lib/constants"
+import { NAV_PY, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSections } from "../types"
 
@@ -32,6 +32,7 @@ const Menu = ({ sections, ...props }: NavMenuProps) => {
         dir={direction}
         orientation="horizontal"
         onValueChange={handleSectionChange}
+        delayDuration={0}
       >
         <NavigationMenu.List asChild>
           <UnorderedList display="flex" listStyleType="none" m="0">
@@ -47,6 +48,13 @@ const Menu = ({ sections, ...props }: NavMenuProps) => {
                       variant="ghost"
                       whiteSpace="nowrap"
                       color={isActive ? "primary.base" : "body.base"}
+                      _after={{
+                        content: '""',
+                        position: "absolute",
+                        insetInline: 0,
+                        top: "100%",
+                        height: NAV_PY,
+                      }}
                     >
                       {/* Animated highlight for active section */}
                       {isActive && (

diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
@@ -22,6 +22,8 @@ import LanguagePicker from "@/components/LanguagePicker"
 import { BaseLink } from "@/components/Link"
 import Search from "@/components/Search"
 
+import { NAV_PY } from "@/lib/constants"
+
 import Menu from "./Menu"
 import MobileNavMenu from "./Mobile"
 import { useNav } from "./useNav"
@@ -69,7 +71,7 @@ const Nav = () => {
         borderColor="rgba(0, 0, 0, 0.1)"
         height="4.75rem"
         justifyContent="center"
-        py={4}
+        py={NAV_PY}
         px={{ base: 4, xl: 8 }}
       >
         <Flex
@@ -94,7 +96,7 @@ const Nav = () => {
             ms={{ base: 3, xl: 8 }}
           >
             <Menu hideBelow="md" sections={linkSections} />
-            <Flex alignItems="center"/*  justifyContent="space-between" */>
+            <Flex alignItems="center" /*  justifyContent="space-between" */>
               <Search {...searchModalDisclosure} />
               {/* Desktop */}
               <HStack hideBelow="md" gap="0">

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -87,3 +87,5 @@ export const SECTION_LABELS: NavSectionKey[] = [
   "participate",
   "research",
 ]
+
+export const NAV_PY = 4