Fix mobile side bar

app/components/t_w/mobile_sidebar_component.html.erb

@@ -1,32 +1,36 @@
-<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
-<div data-controller="unhide" class="hidden relative z-50 lg:hidden" role="dialog" aria-modal="true">
+<div id="sidebar-mobile" class="relative">
   <div data-slideover-target="overlay"
-          class="fixed inset-0 bg-gray-900/80"
-          data-transition-enter="transition ease-out duration-300"
-          data-transition-enter-from="opacity-0"
-          data-transition-enter-to="opacity-100"
-          data-transition-leave="transition ease-in duration-300"
-          data-transition-leave-from="opacity-100"
-          data-transition-leave-to="opacity-0">
-  </div>
-  <div data-slideover-target="menu" class="fixed inset-0 flex">
+       class="hidden fixed inset-0 flex z-50"
+       data-transition-enter="transition ease-out duration-200"
+       data-transition-enter-from="opacity-0"
+       data-transition-enter-to="opacity-100"
+       data-transition-leave="transition ease-in duration-150"
+       data-transition-leave-from="opacity-100"
+       data-transition-leave-to="opacity-0"
+  >
+    <div class="fixed inset-0">
+      <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
+    </div>
     <div data-slideover-target="menu"
-            class="relative mr-16 flex w-full max-w-xs flex-1"
-            data-transition-enter="transition ease-out duration-300"
-            data-transition-enter-from="opacity-0 -translate-x-full"
-            data-transition-enter-to="opacity-100 translate-x-0"
-            data-transition-leave="transition ease-in duration-300"
-            data-transition-leave-from="opacity-100 translate-x-0"
-            data-transition-leave-to="opacity-0 -translate-x-full">
-      <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
-        <button type="button" data-action="slideover#toggle" class="-m-2.5 p-2.5">
-          <span class="sr-only">Close sidebar</span>
-          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+         class="hidden relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white"
+         data-transition-enter="transition ease-out duration-200"
+         data-transition-enter-from="opacity-0 -translate-x-full"
+         data-transition-enter-to="opacity-100 translate-x-0"
+         data-transition-leave="transition ease-in duration-150"
+         data-transition-leave-from="opacity-100 translate-x-0"
+         data-transition-leave-to="opacity-0 -translate-x-full"
+    >
+      <div class="absolute top-0 right-0 -mr-14 p-1">
+        <button data-action="slideover#toggle" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-white" aria-label="Close sidebar">
+          <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       </div>
       <%= render TW::StaticSidebarComponent.new(menu: @menu) %>
     </div>
+    <div class="flex-shrink-0 w-14">
+    </div>
+  </div>
   </div>
-</div>
+

app/javascript/controllers/index.js

@@ -27,6 +27,3 @@ application.register("autofocus", AutofocusController)
 
 import TriStateCheckboxController from "./tri_state_checkbox_controller"
 application.register("tri-state-checkbox", TriStateCheckboxController)
-
-import UnhideController from "./unhide_controller"
-application.register("unhide", UnhideController)