kennethnym/tesseract
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: highlight active main sidebar item

Browse Source
This commit is contained in:
Kenneth
2024-12-02 17:06:10 +00:00
parent da2c7ffcce
commit 3efed700c1
1 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/src/components/main-sidebar.tsx
View File

@@ -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 };