chore(sidebar): use chevron for dropdown (#8997)

Author: avivkeller

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css

@@ -50,11 +50,25 @@
     &::-webkit-details-marker {
       display: none;
     }
+
+    .chevron {
+      @apply size-3
+        shrink-0
+        text-neutral-500
+        motion-safe:transition-transform
+        dark:text-neutral-200;
+    }
   }
 
   .subGroup[open] > .summary {
     @apply text-brand-600
       dark:text-brand-400;
+
+    .chevron {
+      @apply text-brand-600
+        dark:text-brand-400
+        rotate-180;
+    }
   }
 
   .subItemList {

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
 import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
@@ -44,7 +45,10 @@ const renderItems = (
       return (
         <li key={link}>
           <details className={styles.subGroup} open={isOpen}>
-            <summary className={styles.summary}>{label}</summary>
+            <summary className={styles.summary}>
+              {label}
+              <ChevronDownIcon className={styles.chevron} />
+            </summary>
             <ul className={styles.subItemList}>
               {renderItems(subItems, props, pathname)}
             </ul>