refactor: use Fresh's active link styling (#632)

closing #629 Signed-off-by: Niklas Metje <[email protected]>
denoland · Oct 14, 2023 · 5e13b39 · 5e13b39
1 parent f23c69e
commit 5e13b39
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 22 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -6,6 +6,7 @@ import {
   SITE_BAR_STYLES,
   SITE_NAME,
 } from "@/utils/constants.ts";
+import { cx } from "@twind/core";
 import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
 import IconRss from "tabler_icons_tsx/rss.tsx";
@@ -72,9 +73,7 @@ export default function Footer(props: FooterProps) {
       <nav class={NAV_STYLES}>
         <a
           href="/blog"
-          class={props.url.pathname === "/blog"
-            ? ACTIVE_LINK_STYLES
-            : LINK_STYLES}
+          class={cx(LINK_STYLES, ACTIVE_LINK_STYLES)}
         >
           Blog
         </a>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import {
+  ACTIVE_ANCESTOR_LINK_STYLES,
   ACTIVE_LINK_STYLES,
   LINK_STYLES,
   SITE_BAR_STYLES,
@@ -74,25 +75,15 @@ export default function Header(props: HeaderProps) {
       >
         <a
           href="/dashboard"
-          class={cx(
-            props.url.pathname.startsWith("/dashboard")
-              ? ACTIVE_LINK_STYLES
-              : LINK_STYLES,
-            NAV_ITEM,
-          )}
+          class={cx(LINK_STYLES, ACTIVE_ANCESTOR_LINK_STYLES, NAV_ITEM)}
         >
           Dashboard
         </a>
         {isStripeEnabled() &&
           (
             <a
               href="/pricing"
-              class={cx(
-                props.url.pathname === "/pricing"
-                  ? ACTIVE_LINK_STYLES
-                  : LINK_STYLES,
-                NAV_ITEM,
-              )}
+              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
             >
               Pricing
             </a>
@@ -101,12 +92,7 @@ export default function Header(props: HeaderProps) {
           ? (
             <a
               href="/account"
-              class={cx(
-                props.url.pathname === "/account"
-                  ? ACTIVE_LINK_STYLES
-                  : LINK_STYLES,
-                NAV_ITEM,
-              )}
+              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
             >
               Account
             </a>

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -16,6 +16,9 @@ export const NAV_STYLES =
   "flex flex-wrap justify-start gap-x-8 gap-y-4 items-center justify-between h-full";
 export const LINK_STYLES =
   "text-gray-500 transition duration-100 hover:(text-black dark:text-white)";
-export const ACTIVE_LINK_STYLES = LINK_STYLES + " !text-black !dark:text-white";
+export const ACTIVE_LINK_STYLES =
+  "[data-current]:!text-black [data-current]:!dark:text-white";
+export const ACTIVE_ANCESTOR_LINK_STYLES =
+  "[data-ancestor]:!text-black [data-ancestor]:!dark:text-white";
 export const HEADING_STYLES = "text-3xl font-bold";
 export const HEADING_WITH_MARGIN_STYLES = HEADING_STYLES + " mb-8";