refactor: UI components

src/Laravel/src/Layouts/BaseLayout.php

@@ -63,9 +63,7 @@ protected function getSidebarComponent(): Sidebar
                 ])->class('menu-heading-logo'),
 
                 Div::make([
-                    Div::make([
-                        ThemeSwitcher::make(),
-                    ])->class('menu-heading-mode'),
+                    ThemeSwitcher::make(),
 
                     Div::make([
                         Burger::make(),

src/UI/resources/css/components/dropdowns.css

@@ -4,6 +4,7 @@
 
   &-body {
     @apply pointer-events-none invisible absolute z-50 overflow-hidden rounded-md bg-white opacity-0 shadow-lg dark:bg-dark-500 dark:shadow-black/20;
+
     &[data-show] {
       @apply block;
     }
@@ -14,7 +15,7 @@
   }
 
   &-content {
-    @apply flex max-h-64 max-w-[280px] flex-col divide-y divide-gray-200 overflow-y-auto dark:divide-dark-200 xs:max-w-[320px] sm:w-max;
+    @apply flex max-h-64 max-w-[280px] flex-col divide-y divide-gray-200 overflow-y-auto dark:divide-dark-200 xs:max-w-[320px];
 
     .dropdown-input-search {
       @apply mb-0 rounded-none border-0;
@@ -28,13 +29,25 @@
   /* Dropdown menu */
   &-menu {
     @apply flex flex-col divide-y divide-gray-200 dark:divide-dark-200;
+
+    &-item {
+      &--active {
+        .dropdown-menu-link,
+        .btn {
+          @apply pointer-events-none bg-gray-50 text-gray-400 dark:bg-dark-600 dark:text-slate-500;
+        }
+      }
+    }
+
     &-link,
     .btn {
       @apply flex items-center justify-start gap-x-2 px-2 py-2.5 text-3xs hover:bg-gray-100 hover:text-black dark:hover:bg-dark-400 dark:hover:text-white xs:px-4 lg:text-2xs;
+
       > svg {
         @apply h-4 w-4;
       }
     }
+
     .btn {
       @apply rounded-none border-0 focus:ring-0;
     }

src/UI/resources/css/components/languages.css

@@ -0,0 +1,18 @@
+/* Languages switcher */
+.languages {
+  &-icon {
+    @apply block overflow-hidden pr-3 text-slate-600 hover:text-secondary dark:text-dark-50 dark:hover:text-white;
+
+    > svg {
+      @apply h-6 w-6;
+    }
+
+    > svg:last-child {
+      @apply absolute inset-y-0 right-0 my-auto h-3 w-3;
+    }
+  }
+
+  .dropdown-body {
+    @apply min-w-[10rem];
+  }
+}