Merge pull request #1423 from datum-cloud/fix/state-nav

ronggur · web-flow · commit bba158eff949 · 2026-06-23T12:24:39.000+07:00
fix(nav): add hover-follow pill and keep active item semibold
diff --git a/public/images/nav/world-map.png b/public/images/nav/world-map.png
diff --git a/src/data/navigation.json b/src/data/navigation.json
@@ -20,10 +20,10 @@
               "href": "/essentials"
             },
             {
-              "text": "Pricing",
-              "image": "/images/nav/pricing.png",
-              "desc": "Pssssssst... It's free",
-              "href": "/pricing"
+              "text": "Locations",
+              "image": "/images/nav/world-map.png",
+              "desc": "Deploy at the global edge",
+              "href": "/locations"
             }
           ]
         }
@@ -37,7 +37,6 @@
         {
           "title": "Get started:",
           "items": [
-            { "text": "Locations", "href": "/locations" },
             { "text": "Blog", "href": "/blog" },
             {
               "text": "Videos",
diff --git a/src/v1/styles/components-dark.css b/src/v1/styles/components-dark.css
@@ -30,7 +30,22 @@
 
     .nav--main {
       .nav-menu-link {
-        @apply text-glacier-mist-700 opacity-100 hover:opacity-80;
+        @apply text-glacier-mist-700 opacity-100;
+
+        &.link--active {
+          @apply font-semibold;
+        }
+      }
+
+      .nav-menu-item:hover > .nav-menu-link:not(.link--active),
+      .nav-dropdown:focus-within > .nav-menu-link:not(.link--active) {
+        @apply text-canyon-clay---links bg-white font-normal opacity-100;
+      }
+
+      .nav-menu:not(:has(.nav-menu-item:hover)) .nav-menu-link.link--active,
+      .nav-menu-item:hover > .nav-menu-link.link--active,
+      .nav-dropdown:focus-within > .nav-menu-link.link--active {
+        @apply text-canyon-clay---links bg-white font-semibold opacity-100;
       }
     }
   }
diff --git a/src/v1/styles/components-hero.css b/src/v1/styles/components-hero.css
@@ -26,10 +26,6 @@
             }
           }
         }
-
-        .link--active {
-          @apply [&>span]:border-white/70;
-        }
       }
     }
     &.light {
@@ -52,10 +48,6 @@
             }
           }
         }
-
-        .link--active {
-          @apply [&>span]:border-midnight-fjord/70;
-        }
       }
 
       .nav-logo {
diff --git a/src/v1/styles/components-nav.css b/src/v1/styles/components-nav.css
@@ -57,12 +57,24 @@
     }
 
     .nav-menu-link {
-      @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 hover:opacity-80;
+      @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 transition-colors duration-150;
 
       &.link--active {
-        @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100 hover:opacity-80;
+        @apply font-semibold;
       }
     }
+
+    /* Pill: hover preview (normal weight) vs route-active pill (semibold) */
+    .nav-menu-item:hover > .nav-menu-link:not(.link--active),
+    .nav-dropdown:focus-within > .nav-menu-link:not(.link--active) {
+      @apply text-canyon-clay---links rounded-md bg-white font-normal opacity-100;
+    }
+
+    .nav-menu:not(:has(.nav-menu-item:hover)) .nav-menu-link.link--active,
+    .nav-menu-item:hover > .nav-menu-link.link--active,
+    .nav-dropdown:focus-within > .nav-menu-link.link--active {
+      @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100;
+    }
   }
 
   /* Dropdown Styles */

Original file line number	Diff line number	Diff line change
`@@ -20,10 +20,10 @@`
`20`	`20`	`"href": "/essentials"`
`21`	`21`	`},`
`22`	`22`	`{`
`23`		`- "text": "Pricing",`
`24`		`- "image": "/images/nav/pricing.png",`
`25`		`- "desc": "Pssssssst... It's free",`
`26`		`- "href": "/pricing"`
	`23`	`+ "text": "Locations",`
	`24`	`+ "image": "/images/nav/world-map.png",`
	`25`	`+ "desc": "Deploy at the global edge",`
	`26`	`+ "href": "/locations"`
`27`	`27`	`}`
`28`	`28`	`]`
`29`	`29`	`}`
`@@ -37,7 +37,6 @@`
`37`	`37`	`{`
`38`	`38`	`"title": "Get started:",`
`39`	`39`	`"items": [`
`40`		`- { "text": "Locations", "href": "/locations" },`
`41`	`40`	`{ "text": "Blog", "href": "/blog" },`
`42`	`41`	`{`
`43`	`42`	`"text": "Videos",`
Original file line number	Diff line number	Diff line change
`@@ -26,10 +26,6 @@`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`}`
`29`		`-`
`30`		`- .link--active {`
`31`		`- @apply [&>span]:border-white/70;`
`32`		`- }`
`33`	`29`	`}`
`34`	`30`	`}`
`35`	`31`	`&.light {`
`@@ -52,10 +48,6 @@`
`52`	`48`	`}`
`53`	`49`	`}`
`54`	`50`	`}`
`55`		`-`
`56`		`- .link--active {`
`57`		`- @apply [&>span]:border-midnight-fjord/70;`
`58`		`- }`
`59`	`51`	`}`
`60`	`52`
`61`	`53`	`.nav-logo {`
Original file line number	Diff line number	Diff line change
`@@ -57,12 +57,24 @@`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`.nav-menu-link {`
`60`		`- @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 hover:opacity-80;`
	`60`	`+ @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 transition-colors duration-150;`
`61`	`61`
`62`	`62`	`&.link--active {`
`63`		`- @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100 hover:opacity-80;`
	`63`	`+ @apply font-semibold;`
`64`	`64`	`}`
`65`	`65`	`}`
	`66`	`+`
	`67`	`+ /* Pill: hover preview (normal weight) vs route-active pill (semibold) */`
	`68`	`+ .nav-menu-item:hover > .nav-menu-link:not(.link--active),`
	`69`	`+ .nav-dropdown:focus-within > .nav-menu-link:not(.link--active) {`
	`70`	`+ @apply text-canyon-clay---links rounded-md bg-white font-normal opacity-100;`
	`71`	`+ }`
	`72`	`+`
	`73`	`+ .nav-menu:not(:has(.nav-menu-item:hover)) .nav-menu-link.link--active,`
	`74`	`+ .nav-menu-item:hover > .nav-menu-link.link--active,`
	`75`	`+ .nav-dropdown:focus-within > .nav-menu-link.link--active {`
	`76`	`+ @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100;`
	`77`	`+ }`
`66`	`78`	`}`
`67`	`79`
`68`	`80`	`/* Dropdown Styles */`