From 1102c3b8356a6f1f0a23ce36372e64dda7eef46a Mon Sep 17 00:00:00 2001
From: theojungle <mesniltheo@gmail.com>
Date: Thu, 12 Oct 2023 16:20:11 +0200
Subject: [PATCH] fix: navigation subpages

---
 website/app/components/[id]/layout.tsx         | 2 +-
 website/build-app/components/Sidebar/index.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/website/app/components/[id]/layout.tsx b/website/app/components/[id]/layout.tsx
index d62ffe3a44..0ca16d58a5 100644
--- a/website/app/components/[id]/layout.tsx
+++ b/website/app/components/[id]/layout.tsx
@@ -20,7 +20,7 @@ const Layout = ({ children, params }: LayoutProps) => {
 
   return (
     <Documentation.Layout>
-      <Sidebar menu={pages} />
+      <Sidebar isSubPage menu={pages} />
       <div>
         <Text py="3xl" variant="h1">
           {getName(id)}
diff --git a/website/build-app/components/Sidebar/index.tsx b/website/build-app/components/Sidebar/index.tsx
index 867ef14db5..b4e901e0fc 100644
--- a/website/build-app/components/Sidebar/index.tsx
+++ b/website/build-app/components/Sidebar/index.tsx
@@ -11,9 +11,10 @@ import { getName } from '@/build-app/utils/transform-name'
 
 type SidebarProps = {
   menu: PageTree
+  isSubPage?: boolean
 }
 
-export const Sidebar = ({ menu }: SidebarProps) => {
+export const Sidebar = ({ isSubPage, menu }: SidebarProps) => {
   const currentRoute = usePathname()
 
   return (
@@ -38,10 +39,11 @@ export const Sidebar = ({ menu }: SidebarProps) => {
           <Flex as="ul" direction="column" gap="lg">
             {pages.map(({ id, name, parent: pageParent }) => {
               const href = `/${parent}/${pageParent ? `${pageParent}/` : ''}${id}`
+              const isCurrent = isSubPage ? currentRoute.startsWith(href) : currentRoute === href
 
               return (
                 <li key={`sidebar_${category}_page_${id}`}>
-                  <S.Link aria-current={currentRoute === href ? 'page' : undefined} href={href}>
+                  <S.Link aria-current={isCurrent ? 'page' : undefined} href={href}>
                     {name || getName(id)}
                   </S.Link>
                 </li>