docs(navigation-docs): highlight headless or styled properly

Author: maiieul

apps/website/src/components/header/header.tsx

@@ -154,12 +154,15 @@ export default component$(({ showVersion = false }: HeaderProps) => {
             <div class="mr-6 hidden items-center space-x-8 text-sm lg:flex">
               <a
                 class={isDocsActive('/docs/headless/')}
-                href="/docs/headless/introduction"
+                href="/docs/headless/introduction/"
               >
                 Headless
               </a>
               {rootStore.featureFlags?.showStyled && (
-                <a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction">
+                <a
+                  class={isDocsActive('/docs/styled/')}
+                  href="/docs/styled/introduction/"
+                >
                   Styled
                 </a>
               )}

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -58,7 +58,11 @@ export const DocsNavigation = component$(
                       <a
                         class={cn(
                           'transition-color ease-step hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-base flex items-center px-4 py-2 text-sm duration-300',
-                          isLinkActive
+                          isLinkActive ||
+                            (location.url.pathname?.startsWith('/docs/headless/') &&
+                              link.name === 'Headless') ||
+                            (location.url.pathname?.startsWith('/docs/styled/') &&
+                              link.name === 'Styled')
                             ? 'bg-accent text-accent-foreground font-bold'
                             : '',
                         )}