Fixes the side menu collapsing animation for Metrics items

Author: samejr

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

@@ -230,7 +230,7 @@ export function SideMenu({
     mounted: gridMounted,
   } = useContainerWidth({ initialWidth: 216 });
 
-  const canReorder = orderedDashboards.length >= 2 && !isCollapsed;
+  const canReorder = orderedDashboards.length >= 2;
 
   // Handle drag stop - extract new order from layout y-positions
   const handleDashboardDragStop = useCallback(
@@ -582,7 +582,7 @@ export function SideMenu({
                   }
                 />
                 <div ref={gridContainerRef as Ref<HTMLDivElement>}>
-                  {canReorder && gridMounted ? (
+                  {canReorder ? (
                     <ReactGridLayout
                       layout={dashboardLayout}
                       width={gridWidth}
@@ -593,7 +593,7 @@ export function SideMenu({
                         containerPadding: [0, 0] as const,
                       }}
                       resizeConfig={{ enabled: false }}
-                      dragConfig={{ enabled: true, handle: ".sidebar-drag-handle" }}
+                      dragConfig={{ enabled: !isCollapsed, handle: ".sidebar-drag-handle" }}
                       onDragStop={handleDashboardDragStop}
                       className="sidebar-reorder-grid"
                       autoSize

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

@@ -82,7 +82,7 @@ export function SideMenuItem({
     </Link>
   );
 
-  if (action && !isCollapsed) {
+  if (action) {
     return (
       <div className="group/menuitem relative h-8 w-full">
         <SimpleTooltip
@@ -95,9 +95,11 @@ export function SideMenuItem({
           asChild
           disableHoverableContent
         />
-        <div className="absolute top-1 right-1 bottom-1 flex aspect-square items-center justify-center">
-          {action}
-        </div>
+        {!isCollapsed && (
+          <div className="absolute top-1 right-1 bottom-1 flex aspect-square items-center justify-center">
+            {action}
+          </div>
+        )}
       </div>
     );
   }