Active guide page highlight

docs/src/components/DocsHeader.tsx

@@ -3,10 +3,11 @@ import type { CollectionEntry } from "astro:content";
 
 type DocsHeaderProps = {
   groupedGuides: Record<string, CollectionEntry<"guides">[]>;
+  activeGuideTitle: string;
 };
 
 export function DocsHeader(props: DocsHeaderProps) {
-  const { groupedGuides } = props;
+  const { groupedGuides, activeGuideTitle } = props;
   const [isActive, setIsActive] = useState(false);
 
   return (
@@ -29,8 +30,8 @@ export function DocsHeader(props: DocsHeaderProps) {
           <div key={category} className="flex flex-col gap-2">
             <div className="font-bold text-gray-900 text-sm uppercase">{category}</div>
             <div className="flex flex-col">
-              {guides.map((guide) => (
-                <a key={guide.slug} href={`/docs/${guide.slug}`} className="text-gray-500 hover:text-gray-900 py-1">
+              {guides.map(guide => (
+                <a key={guide.slug} href={`/docs/${guide.slug}`} className={`${activeGuideTitle === guide.data.title ? 'text-black': 'text-gray-400'} hover:text-gray-900 py-1`}>
                   {guide.data.title}
                 </a>
               ))}

docs/src/components/Sidebar.astro

@@ -7,9 +7,7 @@ export interface Props {
   activePath: string;
 }
 
-const groupedGuides = getAllGuides();
-
-const { activePath } = Astro.props;
+const { activePath, groupedGuides, activeGuideTitle } = Astro.props;
 ---
 <div class="hidden md:block w-[200px] lg:w-[350px] border-r border-gray-200 text-right min-h-screen flex-shrink-0">
   <div class="relative sh:sticky top-0">
@@ -31,7 +29,7 @@ const { activePath } = Astro.props;
               return (
                 <li class="mb-2">
                   <a href={guidePath}
-                     class:list={["hover:text-black pr-5 py-2", { "text-black": activePath === guidePath }]}>{guide.data.title}</a>
+                     class:list={["hover:text-black pr-5 py-2", { "text-black": activeGuideTitle === guide.data.title }]}>{guide.data.title}</a>
                 </li>
               );
             })}

docs/src/layouts/DocsLayout.astro

@@ -20,9 +20,11 @@ const { groupTitle, sort, title } = guide.data;
 ---
 
 <BaseLayout title={title}>
-  <DocsHeader groupedGuides={groupedGuides} client:load />
+  <div class="block md:hidden">
+    <DocsHeader activeGuideTitle={title} groupedGuides={groupedGuides} client:load />
+  </div>
   <div class="flex">
-    <Sidebar />
+    <Sidebar activeGuideTitle={title} groupedGuides={groupedGuides} />
     <div
       class="min-w-0 max-w-[800px] py-6 md:py-12 prose px-6 md:px-14 prose-base md:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
       <slot />