From 505e0e64aa0f6c740097b31981563735d401c922 Mon Sep 17 00:00:00 2001
From: Githelp AI Aagent <stian@githelp.app>
Date: Sat, 25 Apr 2026 12:55:02 +0000
Subject: [PATCH 1/2] feat: What to change: The left side menu.

Task: 67706355
Source: slack
Requested by: U04E9DZ5ELF
---
 src/components/layout/sidebar.tsx | 45 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index cc1f19b..cf7f0d1 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -120,7 +120,7 @@ export function Sidebar({ className }: SidebarProps) {
 
   const toggleExpanded = (itemName: string) => {
     setExpandedItems((prev) =>
-      prev.includes(itemName) ? prev.filter((item) => item !== itemName) : [...prev, itemName],
+      prev.includes(itemName) ? prev.filter((item) => item !== itemName) : [itemName],
     )
   }
 
@@ -306,24 +306,45 @@ export function Sidebar({ className }: SidebarProps) {
               <div key={item.name}>
                 {item.subItems ? (
                   <div>
-                    <button
-                      type="button"
-                      onClick={() => toggleExpanded(item.name)}
-                      className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
+                    <div
+                      className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                         isActive ? activeClasses : inactiveClasses
                       }`}
                       title={isCollapsed ? item.name : undefined}
                     >
-                      <FlaticonIcon iconClass={item.icon} className="w-5 h-5 flex-shrink-0" />
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          if (!isExpanded) setExpandedItems([item.name])
+                        }}
+                        onKeyDown={(e) => {
+                          if ((e.key === "Enter" || e.key === " ") && !isExpanded) {
+                            e.preventDefault()
+                            setExpandedItems([item.name])
+                          }
+                        }}
+                        className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer"
+                      >
+                        <FlaticonIcon iconClass={item.icon} className="w-5 h-5 flex-shrink-0" />
+                        {!isCollapsed && <span>{item.name}</span>}
+                      </div>
                       {!isCollapsed && (
-                        <>
-                          {item.name}
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            toggleExpanded(item.name)
+                          }}
+                          aria-label={`${isExpanded ? "Collapse" : "Expand"} ${item.name}`}
+                          className="flex-shrink-0 cursor-pointer"
+                        >
                           <ChevronRight
-                            className={`w-4 h-4 ml-auto transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                            className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
                           />
-                        </>
+                        </button>
                       )}
-                    </button>
+                    </div>
                     {!isCollapsed && isExpanded && (
                       <div className="ml-6 mt-1 space-y-1">
                         {item.subItems.map((subItem) => {
@@ -345,7 +366,7 @@ export function Sidebar({ className }: SidebarProps) {
                     )}
                   </div>
                 ) : (
-                  <Link href={item.href}>
+                  <Link href={item.href} onClick={() => setExpandedItems([])}>
                     <div
                       className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                         isActive ? activeClasses : inactiveClasses

From 130989a3677152a6e2542ebddd581b40cff8cf38 Mon Sep 17 00:00:00 2001
From: Githelp AI Aagent <stian@githelp.app>
Date: Sun, 26 Apr 2026 09:15:10 +0000
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20follow-up=20=E2=80=94=20Fix=20sideb?=
 =?UTF-8?q?ar=20bug=20so=20sub-categories=20stay=20expanded=20when=20tappe?=
 =?UTF-8?q?d,=20only=20collapsing=20on=20arrow=20toggle=20or=20switching?=
 =?UTF-8?q?=20main=20category?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Requested via Slack thread
---
 src/components/layout/sidebar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index cf7f0d1..1ac0112 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -85,7 +85,15 @@ const ProjectLogo = ({
 
 export function Sidebar({ className }: SidebarProps) {
   const pathname = usePathname()
-  const [expandedItems, setExpandedItems] = useState<string[]>(["Settings"])
+  // The Sidebar is mounted per-page (not in a shared layout), so its state
+  // is wiped on every navigation. Derive the initially-expanded parent from
+  // the current path so the active sub-item's parent stays expanded across
+  // sub-item clicks and on hard refresh.
+  const [expandedItems, setExpandedItems] = useState<string[]>(() => {
+    if (pathname?.startsWith("/reports/")) return ["Reports"]
+    if (pathname?.startsWith("/settings/")) return ["Settings"]
+    return []
+  })
   const [isCollapsed, setIsCollapsed] = useState(false)
   const { user } = useUser()
   const isAuthenticated = !!user?.id