From b5273f7326b71b7d9323ed43d871a027cd8e1a3d Mon Sep 17 00:00:00 2001
From: Konstantin Wohlwend <n2d4xc@gmail.com>
Date: Fri, 17 Apr 2026 12:15:29 -0700
Subject: [PATCH] Clicking a dashboard category now opens its first page

---
 .../projects/[projectId]/sidebar-layout.tsx   | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
index 8a2ac4299..a652fe84e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
@@ -188,7 +188,7 @@ function NavItem({
     isHighlighted
       ? "bg-white/70 text-foreground shadow-sm ring-1 ring-white/60 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500/[0.15] dark:to-blue-500/[0.08] dark:shadow-[0_0_12px_rgba(59,130,246,0.15)] dark:ring-blue-500/20"
       : inactiveClasses,
-    isSection ? "cursor-default" : "cursor-pointer",
+    "cursor-pointer",
     isSection && isExpanded && !isHighlighted && "bg-white/20 dark:bg-background/30"
   );
 
@@ -262,20 +262,27 @@ function NavItem({
   return (
     <div className="transition-[margin] duration-200">
       {isSection ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={onToggle}
-          aria-expanded={isExpanded}
-          className={buttonClasses}
-        >
-          <span className="flex min-w-0 flex-1 items-center gap-3">
+        <div className={buttonClasses}>
+          <Link href={item.firstItemHref ?? href ?? "#"} onClick={onClick} className="flex min-w-0 flex-1 items-center gap-3">
             <IconComponent className={iconClasses} />
             <span className="truncate text-sm">{item.name}</span>
-          </span>
-          <CaretDownIcon weight="bold" className={caretClasses} />
-        </Button>
+          </Link>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onToggle?.();
+            }}
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? `Collapse ${item.name}` : `Expand ${item.name}`}
+            className="h-7 w-7 rounded-md p-0 text-muted-foreground transition-all duration-150 hover:bg-white/30 hover:text-foreground hover:transition-none dark:hover:bg-background/40"
+          >
+            <CaretDownIcon weight="bold" className={caretClasses} />
+          </Button>
+        </div>
       ) : (
         <Button
           asChild