Click anywhere on the side menu header to collapse it

Author: samejr

apps/webapp/app/components/navigation/SideMenuSection.tsx

@@ -40,18 +40,16 @@ export function SideMenuSection({
       <div className="relative w-full">
         {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          className="flex items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 transition hover:bg-charcoal-750"
+          className="group/section flex cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 transition hover:bg-charcoal-750"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed ? 0 : 1,
           }}
           transition={{ duration: 0.15, ease: "easeOut" }}
+          onClick={isSideMenuCollapsed ? undefined : handleToggle}
+          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
         >
-          <div
-            className="flex cursor-pointer items-center gap-1 text-text-dimmed transition hover:text-text-bright"
-            onClick={isSideMenuCollapsed ? undefined : handleToggle}
-            style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
-          >
+          <div className="flex items-center gap-1 text-text-dimmed transition group-hover/section:text-text-bright">
             <h2 className="whitespace-nowrap text-xs">{title}</h2>
             <motion.div
               initial={isCollapsed}