From 290f6dfd9c4eb5cfa2421ef24385b278c38d077c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:10:09 +0000
Subject: [PATCH] UI fixes

---
 libs/ui/src/lib/layout/AppSidebar.tsx | 43 ++++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index 81825eee7..de1fdfcaf 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import {
   AppShell,
   Badge,
+  Collapse,
   Group,
   NavLink,
   Popover,
@@ -14,7 +15,6 @@ import {
   useMantineColorScheme,
 } from '@mantine/core';
 import {
-  IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
 } from '@tabler/icons-react';
@@ -410,11 +410,15 @@ export function AppSidebar({
                     >
                       {t(section.label)}
                     </Text>
-                    {sectionOpened ? (
-                      <IconChevronDown size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-                    ) : (
-                      <IconChevronRight size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-                    )}
+                    <IconChevronRight
+                      size={14}
+                      stroke={1.8}
+                      color="var(--mantine-color-gray-5)"
+                      style={{
+                        transform: sectionOpened ? 'rotate(90deg)' : 'rotate(0deg)',
+                        transition: 'transform 200ms ease',
+                      }}
+                    />
                   </UnstyledButton>
                 )}
                 {section.label && collapsed && sectionIndex > 0 && (
@@ -426,18 +430,21 @@ export function AppSidebar({
                     }}
                   />
                 )}
-                {(!section.label || sectionOpened || collapsed) &&
-                  section.items.map((item) => (
-                    <SidebarItem
-                      key={item.label}
-                      item={item}
-                      collapsed={collapsed}
-                      activePath={activePath}
-                      onNavigate={onNavigate}
-                      opened={openMap[item.label] ?? isBranchActive(item, activePath)}
-                      onToggle={(next) => setItemOpened(item.label, next)}
-                    />
-                  ))}
+                <Collapse in={!section.label || sectionOpened || collapsed}>
+                  <Stack gap={2}>
+                    {section.items.map((item) => (
+                      <SidebarItem
+                        key={item.label}
+                        item={item}
+                        collapsed={collapsed}
+                        activePath={activePath}
+                        onNavigate={onNavigate}
+                        opened={openMap[item.label] ?? isBranchActive(item, activePath)}
+                        onToggle={(next) => setItemOpened(item.label, next)}
+                      />
+                    ))}
+                  </Stack>
+                </Collapse>
               </Stack>
             );
           })}