Fix / dropdown menu with tailwind component (#197)

app/views/madmin/application/_menu_resources.html.erb

@@ -0,0 +1,7 @@
+<% Madmin.resources.each do |resource| %>
+  <%= nav_link_to resource.friendly_name.pluralize, resource.index_path, class: "block p-2 rounded hover:bg-gray-100", starts_with: resource.index_path, active_class: "font-bold text-black" %>
+<% end %>
+
+<div class="mt-auto">
+  <%= link_to "View Madmin on GitHub", "https://github.com/excid3/madmin", target: :_blank, class: "block p-2 rounded text-gray-500 hover:bg-gray-100" %>
+</div>

app/views/madmin/application/_navigation.html.erb

@@ -1,4 +1,4 @@
-<div class="flex flex-col h-full text-sm" data-controller="dropdown">
+<div class="flex flex-col h-full text-sm">
   <div class="flex md:block justify-between items-center">
     <div class="flex md:block items-center">
       <h1 class="mr-2 md:p-2 text-xl font-semibold">Madmin</h1>
@@ -9,24 +9,21 @@
       <% end %>
     </div>
 
-    <div class="-mr-2 flex items-center md:hidden">
+    <div class="-mr-2 flex items-center md:hidden relative" data-controller="dropdown">
       <button data-action="click->dropdown#toggle touch->dropdown#toggle click@window->dropdown#hide touch@window#dropdown->hide" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white" id="main-menu" aria-haspopup="true">
         <span class="sr-only">Open main menu</span>
         <!-- Heroicon name: outline/menu -->
         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
         </svg>
       </button>
-    </div>
-  </div>
 
-  <div class="hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
-    <% Madmin.resources.each do |resource| %>
-      <%= nav_link_to resource.friendly_name.pluralize, resource.index_path, class: "block p-2 rounded hover:bg-gray-100", starts_with: resource.index_path, active_class: "font-bold text-black" %>
-    <% end %>
-
-    <div class="mt-auto">
-      <%= link_to "View Madmin on GitHub", "https://github.com/excid3/madmin", target: :_blank, class: "block p-2 rounded text-gray-500 hover:bg-gray-100" %>
+      <div class="absolute top-12 right-0 bg-white rounded-lg hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
+        <%= render "menu_resources" %>
+      </div>
+    </div>
+    <div class="hidden md:block">
+      <%= render "menu_resources" %>
     </div>
   </div>
 </div>