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

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

@@ -8,7 +8,7 @@ import {
SidebarMenuItem, SidebarMenuItem,
SidebarSeparator, SidebarSeparator,
} from "@/components/ui/sidebar.tsx"; } from "@/components/ui/sidebar.tsx";
import { Link } from "@tanstack/react-router"; import { Link, useRouterState } from "@tanstack/react-router";
import { LayoutPanelLeft, ScrollText } from "lucide-react"; import { LayoutPanelLeft, ScrollText } from "lucide-react";
function MainSidebar() { function MainSidebar() {
@@ -23,9 +23,20 @@ function MainSidebar() {
<SidebarSeparator /> <SidebarSeparator />
<SidebarContent> <SidebarContent>
<SidebarGroup> <SidebarGroup>
<MainSidebarMenu />
</SidebarGroup>
</SidebarContent>
</Sidebar>
);
}
function MainSidebarMenu() {
const router = useRouterState();
return (
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton asChild isActive={router.location.pathname === "/"}>
<Link to="/"> <Link to="/">
<LayoutPanelLeft /> <LayoutPanelLeft />
Workspaces Workspaces
@@ -33,7 +44,10 @@ function MainSidebar() {
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton
asChild
isActive={router.location.pathname === "/templates"}
>
<Link to="/templates"> <Link to="/templates">
<ScrollText /> <ScrollText />
Templates Templates
@@ -41,9 +55,6 @@ function MainSidebar() {
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
); );
} }