From 1f8f866414fda14241a0075a54200c6c5834bd4e Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 17 Apr 2026 17:25:57 +0200
Subject: [PATCH] Split Apps sidebar item: label links to /apps, chevron
 toggles sub-nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Sidebar.tsx | 61 ++++++++++++++++-------------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 7f0df97..5221ba8 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import {
   Home,
@@ -24,7 +24,6 @@ export default function Sidebar() {
   const [sidebarExpanded, setSidebarExpanded] = useState(true);
   const { logout } = useAuth();
   const location = useLocation();
-  const navigate = useNavigate();
   const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
 
   const isAppsRoute = location.pathname.startsWith("/apps");
@@ -97,36 +96,44 @@ export default function Sidebar() {
 
         {/* Apps — expandable */}
         <div>
-          <button
-            onClick={() => {
-              if (!sidebarExpanded) {
-                navigate("/apps");
-                return;
-              }
-              setAppsOpen((o) => !o);
-            }}
-            className={cn(
-              "w-full flex items-center rounded-lg transition-colors",
-              sidebarExpanded ? "px-3 py-2 gap-3" : "justify-center py-3",
-              isAppsRoute
-                ? "bg-primary/10 text-primary"
-                : "text-muted hover:bg-muted/20 hover:text-foreground"
-            )}
-          >
-            <Grid2X2 className="h-5 w-5 shrink-0" />
-            {sidebarExpanded && (
-              <>
-                <span className="text-sm font-medium whitespace-nowrap flex-1 text-left">
-                  Apps
-                </span>
+          {sidebarExpanded ? (
+            <div
+              className={cn(
+                "flex items-center rounded-lg transition-colors",
+                isAppsRoute
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted hover:bg-muted/20 hover:text-foreground"
+              )}
+            >
+              <NavLink
+                to="/apps"
+                end
+                className="flex items-center gap-3 px-3 py-2 flex-1 min-w-0"
+              >
+                <Grid2X2 className="h-5 w-5 shrink-0" />
+                <span className="text-sm font-medium whitespace-nowrap">Apps</span>
+              </NavLink>
+              <button
+                onClick={() => setAppsOpen((o) => !o)}
+                className="px-2 py-2 rounded-r-lg"
+                aria-label={appsOpen ? "Collapse apps" : "Expand apps"}
+              >
                 {appsOpen ? (
                   <ChevronDown className="h-4 w-4 shrink-0" />
                 ) : (
                   <ChevronRight className="h-4 w-4 shrink-0" />
                 )}
-              </>
-            )}
-          </button>
+              </button>
+            </div>
+          ) : (
+            <NavLink
+              to="/apps"
+              end
+              className={({ isActive }) => navItemClass(isActive)}
+            >
+              <Grid2X2 className="h-5 w-5 shrink-0" />
+            </NavLink>
+          )}
 
           {/* Apps sub-items — only when sidebar is expanded and appsOpen */}
           {sidebarExpanded && appsOpen && (