From 3efed700c1878212039d93b49d21f3154bda237a Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Mon, 2 Dec 2024 17:06:10 +0000
Subject: [PATCH] feat: highlight active main sidebar item

---
 web/src/components/main-sidebar.tsx | 49 ++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/web/src/components/main-sidebar.tsx b/web/src/components/main-sidebar.tsx
index 256bdd0..34f115b 100644
--- a/web/src/components/main-sidebar.tsx
+++ b/web/src/components/main-sidebar.tsx
@@ -8,7 +8,7 @@ import {
 	SidebarMenuItem,
 	SidebarSeparator,
 } from "@/components/ui/sidebar.tsx";
-import { Link } from "@tanstack/react-router";
+import { Link, useRouterState } from "@tanstack/react-router";
 import { LayoutPanelLeft, ScrollText } from "lucide-react";
 
 function MainSidebar() {
@@ -23,28 +23,39 @@ function MainSidebar() {
 			<SidebarSeparator />
 			<SidebarContent>
 				<SidebarGroup>
-					<SidebarMenu>
-						<SidebarMenuItem>
-							<SidebarMenuButton asChild>
-								<Link to="/">
-									<LayoutPanelLeft />
-									Workspaces
-								</Link>
-							</SidebarMenuButton>
-						</SidebarMenuItem>
-						<SidebarMenuItem>
-							<SidebarMenuButton asChild>
-								<Link to="/templates">
-									<ScrollText />
-									Templates
-								</Link>
-							</SidebarMenuButton>
-						</SidebarMenuItem>
-					</SidebarMenu>
+					<MainSidebarMenu />
 				</SidebarGroup>
 			</SidebarContent>
 		</Sidebar>
 	);
 }
 
+function MainSidebarMenu() {
+	const router = useRouterState();
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<SidebarMenuButton asChild isActive={router.location.pathname === "/"}>
+					<Link to="/">
+						<LayoutPanelLeft />
+						Workspaces
+					</Link>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+			<SidebarMenuItem>
+				<SidebarMenuButton
+					asChild
+					isActive={router.location.pathname === "/templates"}
+				>
+					<Link to="/templates">
+						<ScrollText />
+						Templates
+					</Link>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}
+
 export { MainSidebar };