feat: remove bootstrap's collapses; improve animations

frontend/src/js/bootstrap.js

@@ -2,7 +2,6 @@ import './_tooltip.js';
 import 'bootstrap/js/dist/dropdown';
 import Toast from 'bootstrap/js/dist/toast';
 import 'bootstrap/js/dist/dropdown';
-import 'bootstrap/js/dist/collapse';
 import Offcanvas from 'bootstrap/js/dist/offcanvas';
 
 window.Offcanvas = Offcanvas;

frontend/src/styles/_animations.scss

@@ -56,6 +56,22 @@
   animation: slide-in-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
+@keyframes slide-out-left {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slide-out-left 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
 // HTMX Loading
 @keyframes spin {
   0% {

frontend/src/styles/_transitions.scss

@@ -6,8 +6,6 @@ $enable-transitions: true !default;
 $enable-reduced-motion: true !default;
 
 $transition-fade: opacity 0.15s linear !default;
-$transition-collapse: height 0.35s ease !default;
-$transition-collapse-width: width 0.35s ease !default;
 
 // Fade transition
 .fade {
@@ -22,35 +20,4 @@ $transition-collapse-width: width 0.35s ease !default;
     &:not(.show) {
         opacity: 0;
     }
-}
-
-// // Collapse transitions
-.bs.collapse {
-    &:not(.show) {
-        display: none;
-    }
-}
-
-.bs.collapsing {
-    height: 0;
-    overflow: hidden;
-    transition: $transition-collapse;
-
-    @if $enable-reduced-motion {
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-    }
-
-    &.collapse-horizontal {
-        width: 0;
-        height: auto;
-        transition: $transition-collapse-width;
-
-        @if $enable-reduced-motion {
-            @media (prefers-reduced-motion: reduce) {
-                transition: none;
-            }
-        }
-    }
 }

frontend/src/styles/style.scss

@@ -45,14 +45,6 @@ select {
   font-size: 14px;
 }
 
-[data-bs-toggle="collapse"] .fa-chevron-down {
-  transition: transform 0.25s ease-in-out;
-}
-
-[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
-  transform: rotate(-180deg);
-}
-
 div:where(.swal2-container) {
   z-index: 1101 !important;
 }
@@ -85,4 +77,4 @@ div:where(.swal2-container) {
 
 [x-cloak] {
   display: none !important;
-}
+}

frontend/src/styles/tailwind.css

@@ -309,13 +309,15 @@
     }
 
     .sidebar-fixed {
-        /* Sets the fixed, expanded width for the container */
-        @apply lg:w-[17%] transition-all duration-100;
+        /* Sets the fixed, expanded width for the container.
+           Using fixed rem width instead of percentage to prevent width inconsistencies
+           caused by scrollbar presence affecting viewport width calculations. */
+        @apply lg:w-80 transition-all duration-100;
     }
 
     .sidebar-fixed #sidebar {
         /* Sets the fixed, expanded width for the inner navigation */
-        @apply lg:w-[17%] transition-all duration-100;
+        @apply lg:w-80 transition-all duration-100;
     }
 
     .sidebar-fixed .sidebar-item-list {
@@ -324,9 +326,7 @@
 
     .sidebar-fixed + main {
         /* Adjusts the main content margin to account for the expanded sidebar */
-        @apply lg:ml-[17%];
-
-        /* Using 16vw to account for padding/margins */
+        @apply lg:ml-80;
     }
 
     .sidebar-fixed .sidebar-item {