rotate icon

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -10,6 +10,18 @@
   height: $height;
 }
 
+// icon
+.btn-toggle-collapse :global {
+  .material-icons {
+    transition: transform 0.25s;
+
+    // rotation
+    &.rotate180 {
+      transform: rotate(180deg);
+    }
+  }
+}
+
 // == Colors
 .btn-toggle-collapse {
   &:global {

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -16,9 +16,11 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
     mutateCollapsedContentsOpened(false);
   }, [isCollapsedMode, mutateCollapsedContentsOpened, mutateCollapsedMode]);
 
+  const rotationClass = isCollapsedMode ? 'rotate180' : '';
+
   return (
     <button type="button" className={`btn btn-primary ${styles['btn-toggle-collapse']} p-2`} onClick={toggle}>
-      <span className="material-icons fs-2">first_page</span>
+      <span className={`material-icons fs-2 ${rotationClass}`}>first_page</span>
     </button>
   );
 });