From 9143916c71aa78d33fd70612723f7ebd7ca683ee Mon Sep 17 00:00:00 2001
From: MaxenceLenoir <60671940+MaxenceLenoir@users.noreply.github.com>
Date: Thu, 4 Apr 2024 03:00:56 +0200
Subject: [PATCH] Fix / dropdown menu with tailwind component (#197)

---
 .../application/_menu_resources.html.erb      |  7 +++++++
 .../madmin/application/_navigation.html.erb   | 19 ++++++++-----------
 2 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 app/views/madmin/application/_menu_resources.html.erb

diff --git a/app/views/madmin/application/_menu_resources.html.erb b/app/views/madmin/application/_menu_resources.html.erb
new file mode 100644
index 0000000..901a8ea
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/views/madmin/application/_navigation.html.erb b/app/views/madmin/application/_navigation.html.erb
index 54f5240..4981d51 100644
--- a/app/views/madmin/application/_navigation.html.erb
+++ b/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,7 +9,7 @@
       <% 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 -->
@@ -17,16 +17,13 @@
           <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>