From 80d82ede8129adb7521d44de763d9e2f6a9725c3 Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Sun, 10 Sep 2023 15:46:36 +0900
Subject: [PATCH] website: use path prop #84

---
 packages/website/src/components/Sidebar.tsx | 22 ++++++++++++++++-----
 packages/website/src/routes/docs/index.tsx  | 10 ++++++++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/website/src/components/Sidebar.tsx b/packages/website/src/components/Sidebar.tsx
index 90d3615e8..3b4b77152 100644
--- a/packages/website/src/components/Sidebar.tsx
+++ b/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>
 );
diff --git a/packages/website/src/routes/docs/index.tsx b/packages/website/src/routes/docs/index.tsx
index 3ad0b20a4..c07d54f29 100644
--- a/packages/website/src/routes/docs/index.tsx
+++ b/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>
   );