enhance dropdown with burger

app/components/ui/dropdown_component.html.erb

@@ -1,6 +1,13 @@
 <%= content_tag :details, class: classes, **attributes do %>
   <summary class="m-1 btn btn-ghost">
-    <%= content %>
+    <% if toggle_open? && toggle_close? %>
+      <div class="swap" data-dropdown-target="swap">
+        <div class="swap-on"><%= toggle_open %></div>
+        <div class="swap-off"><%= toggle_close %></div>
+      </div>
+    <% else %>
+      <%= content %>
+    <% end %>
   </summary>
   <%= content_tag :ul, class: content_classes do %>
     <% menu_items.each do |menu_item| %>

app/components/ui/dropdown_component.rb

@@ -2,7 +2,7 @@
 
 class Ui::DropdownComponent < ApplicationComponent
   renders_many :menu_items, types: {
-    divider: Ui::DividerComponent,
+    divider: lambda { render Ui::DividerComponent.new(class: "my-2") },
     link_to: lambda { |*args, **attributes|
       content_tag :li do
         attributes[:class] = class_names("!whitespace-nowrap", attributes[:class])
@@ -16,6 +16,10 @@ class Ui::DropdownComponent < ApplicationComponent
       end
     }
   }
+
+  renders_one :toggle_open
+  renders_one :toggle_close
+
   OPEN_FROM_MAPPING = {
     left: "dropdown-left",
     right: "dropdown-right",
@@ -31,7 +35,6 @@ class Ui::DropdownComponent < ApplicationComponent
   option :hover, type: Dry::Types["strict.bool"], default: proc { false }
   option :align, type: Dry::Types["coercible.symbol"].enum(*ALIGN_MAPPING.keys), optional: true
   option :open_from, type: Dry::Types["coercible.symbol"].enum(*OPEN_FROM_MAPPING.keys), optional: true
-  option :content_classes, type: Dry::Types["coercible.string"], optional: true
 
   private
 
@@ -40,7 +43,7 @@ def before_render
   end
 
   def classes
-    [component_classes, attributes[:class]].compact_blank.join(" ")
+    [component_classes, attributes.delete(:class)].compact_blank.join(" ")
   end
 
   def component_classes
@@ -54,6 +57,6 @@ def component_classes
   end
 
   def content_classes
-    class_names("p-2 bg-base-100 dropdown-content", attributes[:content_class])
+    class_names("menu p-2 mt-4 z-[1] rounded-lg shadow-2xl bg-base-100 dropdown-content", attributes.delete(:content_classes))
   end
 end

app/javascript/controllers/dropdown_controller.js

@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import { useClickOutside } from 'stimulus-use'
 
 export default class extends Controller {
-  static targets = ['summary']
+  static targets = ['summary', 'swap']
 
   connect () {
     useClickOutside(this)
@@ -22,8 +22,10 @@ export default class extends Controller {
   toggle (event) {
     if (this.element.open) {
       this.element.setAttribute('aria-expanded', true)
+      this.swapTarget.classList.add('swap-active')
     } else {
       this.element.setAttribute('aria-expanded', false)
+      this.swapTarget.classList.remove('swap-active')
     }
   }
 

app/views/shared/_authenticated.html.erb

@@ -13,11 +13,12 @@
             <% c.with_menu_item_link_to "Mes listes", "#" %>
             <% c.with_menu_item_divider %>
             <% c.with_menu_item_button_to "Se déconnecter", Current.session, method: :delete, id: :sign_out %>
-              <div class="avatar placeholder" id="navbar_toggle">
-                <div class="bg-neutral-focus text-neutral-content rounded-full w-8">
-                  <span class="text-xs"><%= [Current.user.first_name.first, Current.user.last_name.first].join.upcase %></span>
-                </div>
-              </div>
+            <% c.with_toggle_open do %>
+              <%= heroicon "x-mark", options: {class: "w-6 h-6"} %>
+            <% end %>
+            <% c.with_toggle_close do %>
+              <%= heroicon "bars-3", options: {class: "w-6 h-6"} %>
+            <% end %>
           <% end %>
         </li>
       </ul>