website: use path prop #84

packages/website/src/components/Sidebar.tsx

@@ -1,17 +1,29 @@
 import { SidebarGroup } from "./SidebarGroup.js";
 import { SidebarItem } from "./SidebarItem.js";
 
-export const Sidebar = () => (
+export const Sidebar = ({ path }: { path: string }) => (
   <aside className="md:sticky md:top-10 flex flex-col gap-2">
     <SidebarItem
-      selected={true}
+      selected={path === "/docs/introduction"}
       link="/docs/introduction"
       text="Introduction"
     />
-    <SidebarItem link="/docs/installing" text="Installing" />
+    <SidebarItem
+      selected={path === "/docs/installing"}
+      link="/docs/installing"
+      text="Installing"
+    />
     <SidebarGroup text="Practices">
-      <SidebarItem link="/docs/practices/minimal" text="Minimal" />
-      <SidebarItem link="/docs/practices/router" text="Router" />
+      <SidebarItem
+        selected={path === "/docs/practices/minimal"}
+        link="/docs/practices/minimal"
+        text="Minimal"
+      />
+      <SidebarItem
+        selected={path === "/docs/practices/router"}
+        link="/docs/practices/router"
+        text="Router"
+      />
     </SidebarGroup>
   </aside>
 );

packages/website/src/routes/docs/index.tsx

@@ -1,10 +1,16 @@
 import { ReactNode } from "react";
 import { Sidebar } from "../../components/Sidebar.js";
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default function Layout({
+  path,
+  children,
+}: {
+  path: string;
+  children: ReactNode;
+}) {
   return (
     <div className="flex flex-col md:flex-row gap-16 md:gap-8">
-      <Sidebar></Sidebar>
+      <Sidebar path={path}></Sidebar>
       <div className="md:grow md:px-12">{children}</div>
     </div>
   );