enhancement: Active selected link in sidebar state (#723)

Update Sidebar.tsx
otto8-ai · Dec 2, 2024 · 5772b0a · 5772b0a
1 parent a419617
commit 5772b0a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/ui/admin/app/components/sidebar/Sidebar.tsx b/ui/admin/app/components/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import {
     BotIcon,
     BrainIcon,
@@ -81,6 +81,7 @@ const items = [
 
 export function AppSidebar() {
     const { state } = useSidebar();
+    const location = useLocation();
     return (
         <Sidebar collapsible="icon">
             <SidebarRail />
@@ -108,12 +109,25 @@ export function AppSidebar() {
                                     <SidebarMenuButton
                                         asChild
                                         className="w-full"
+                                        isActive={location.pathname.startsWith(
+                                            item.url
+                                        )}
+                                        variant="spill"
                                     >
                                         <Link
                                             to={item.url}
                                             className="w-full flex items-center"
                                         >
-                                            <item.icon className="mr-2" />
+                                            <item.icon
+                                                className={cn(
+                                                    "mr-2",
+                                                    location.pathname.startsWith(
+                                                        item.url
+                                                    )
+                                                        ? "text-primary"
+                                                        : ""
+                                                )}
+                                            />
                                             <span>{item.title}</span>
                                         </Link>
                                     </SidebarMenuButton>

diff --git a/ui/admin/app/components/ui/sidebar.tsx b/ui/admin/app/components/ui/sidebar.tsx
@@ -415,7 +415,7 @@ const SidebarContent = React.forwardRef<
             ref={ref}
             data-sidebar="content"
             className={cn(
-                "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+                "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden group-data-[collapsible=icon]:overflow-hidden",
                 className
             )}
             {...props}
@@ -534,6 +534,7 @@ const sidebarMenuButtonVariants = cva(
                     "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                 outline:
                     "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+                spill: "w-full group-data-[collapsible=icon]:data-[active=true]:!bg-background group-data-[collapsible=icon]:data-[active=true]:!w-[calc(100%+20px)] hover:bg-background hover:w-[calc(100%+20px)] data-[active=true]:bg-background data-[active=true]:w-[calc(100%+20px)] pr-[10px]",
             },
             size: {
                 default: "h-8 text-sm",