activeadmin 3.4.0 → 4.0.0.beta18

data/app/helpers/active_admin/breadcrumb_helper.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+module ActiveAdmin
+  module BreadcrumbHelper
+    ID_FORMAT_REGEXP = /\A(\d+|[a-f0-9]{24}|(?:[a-f0-9]{8}-(?:[a-f0-9]{4}-){3}[a-f0-9]{12}))\z/.freeze
+
+    # Returns an array of links to use in a breadcrumb
+    def build_breadcrumb_links(path = request.path, html_options = {})
+      config = active_admin_config.breadcrumb
+      if config.is_a?(Proc)
+        instance_exec(controller, &config)
+      elsif config.present?
+        default_breadcrumb_links(path, html_options)
+      end
+    end
+
+    def default_breadcrumb_links(path, html_options = {})
+      # remove leading "/" and split up the URL
+      # and remove last since it's used as the page title
+      parts = path.split("/").select(&:present?)[0..-2]
+
+      parts.each_with_index.map do |part, index|
+        # 1. try using `display_name` if we can locate a DB object
+        # 2. try using the model name translation
+        # 3. default to calling `titlecase` on the URL fragment
+        if ID_FORMAT_REGEXP.match?(part) && parts[index - 1]
+          parent = active_admin_config.belongs_to_config.try :target
+          config = parent && parent.resource_name.route_key == parts[index - 1] ? parent : active_admin_config
+          name = display_name config.find_resource part
+        end
+        name ||= I18n.t "activerecord.models.#{part.singularize}", count: 2.1, default: part.titlecase
+
+        # Don't create a link if the resource's show action is disabled
+        if !config || config.defined_actions.include?(:show)
+          link_to name, "/" + parts[0..index].join("/"), html_options
+        else
+          name
+        end
+      end
+    end
+  end
+end

data/app/helpers/active_admin/display_helper.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+module ActiveAdmin
+  module DisplayHelper
+    DISPLAY_NAME_FALLBACK = -> {
+      klass = self.class
+      name = if klass.respond_to?(:model_name)
+               if klass.respond_to?(:primary_key)
+                 "#{klass.model_name.human} ##{send(klass.primary_key)}"
+               else
+                 klass.model_name.human
+               end
+             elsif klass.respond_to?(:primary_key)
+               " ##{send(klass.primary_key)}"
+             end
+      name.present? ? name : to_s
+    }
+
+    def DISPLAY_NAME_FALLBACK.inspect
+      "DISPLAY_NAME_FALLBACK"
+    end
+
+    # Attempts to call any known display name methods on the resource.
+    # See the setting in `application.rb` for the list of methods and their priority.
+    def display_name(resource)
+      unless resource.nil?
+        result = render_in_context(resource, display_name_method_for(resource))
+        if result.to_s.strip.present?
+          ERB::Util.html_escape(result)
+        else
+          ERB::Util.html_escape(render_in_context(resource, DISPLAY_NAME_FALLBACK))
+        end
+      end
+    end
+
+    def format_attribute(resource, attr)
+      value = find_value resource, attr
+
+      if value.is_a?(Arbre::Element)
+        value
+      elsif boolean_attr?(resource, attr, value)
+        Arbre::Context.new { status_tag value }
+      else
+        pretty_format value
+      end
+    end
+
+    # Attempts to create a human-readable string for any object
+    def pretty_format(object)
+      case object
+      when String, Numeric, Symbol, Arbre::Element
+        object.to_s
+      when Date, Time
+        I18n.localize object, format: active_admin_application.localize_format
+      when Array
+        format_collection(object)
+      else
+        if defined?(::ActiveRecord) && object.is_a?(ActiveRecord::Base) ||
+            defined?(::Mongoid) && object.class.include?(Mongoid::Document)
+          auto_link object
+        elsif defined?(::ActiveRecord) && object.is_a?(ActiveRecord::Relation)
+          format_collection(object)
+        else
+          display_name object
+        end
+      end
+    end
+
+    private
+
+    # Looks up and caches the first available display name method.
+    # To prevent conflicts, we exclude any methods that happen to be associations.
+    # If no methods are available and we're about to use the Kernel's `to_s`, provide our own.
+    def display_name_method_for(resource)
+      @@display_name_methods_cache ||= {}
+      @@display_name_methods_cache[resource.class] ||= begin
+        methods = active_admin_application.display_name_methods - association_methods_for(resource)
+        method = methods.detect { |method| resource.respond_to? method }
+
+        if method != :to_s || resource.method(method).source_location
+          method
+        else
+          DISPLAY_NAME_FALLBACK
+        end
+      end
+    end
+
+    def association_methods_for(resource)
+      return [] unless resource.class.respond_to? :reflect_on_all_associations
+      resource.class.reflect_on_all_associations.map(&:name)
+    end
+
+    def find_value(resource, attr)
+      if attr.is_a? Proc
+        attr.call resource
+      elsif resource.respond_to? attr
+        resource.public_send attr
+      elsif resource.respond_to? :[]
+        resource[attr]
+      end
+    end
+
+    def format_collection(collection)
+      safe_join(collection.map { |item| pretty_format(item) }, ", ")
+    end
+
+    def boolean_attr?(resource, attr, value)
+      case value
+      when TrueClass, FalseClass
+        true
+      else
+        if resource.class.respond_to? :attribute_types
+          resource.class.attribute_types[attr.to_s].is_a?(ActiveModel::Type::Boolean)
+        end
+      end
+    end
+  end
+end

data/app/helpers/active_admin/form_helper.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+module ActiveAdmin
+  module FormHelper
+    RESERVED_PARAMS = %w(controller action commit utf8).freeze
+
+    def active_admin_form_for(resource, options = {}, &block)
+      Arbre::Context.new({}, self) do
+        active_admin_form_for resource, options, &block
+      end.content
+    end
+
+    def hidden_field_tags_for(params, options = {})
+      fields_for_params(params.to_unsafe_hash, options).map do |kv|
+        k, v = kv.first
+        hidden_field_tag k, v, id: sanitize_to_id("hidden_active_admin_#{k}")
+      end.join("\n").html_safe
+    end
+
+    # Flatten a params Hash to an array of fields.
+    #
+    # @param params [Hash]
+    # @param options [Hash] :namespace and :except
+    #
+    # @return [Array] of [Hash] with one element.
+    #
+    # @example
+    #   fields_for_params(scope: "all", users: ["greg"])
+    #     => [ {"scope" => "all"} , {"users[]" => "greg"} ]
+    #
+    def fields_for_params(params, options = {})
+      namespace = options[:namespace]
+      except = Array.wrap(options[:except]).map(&:to_s)
+
+      params.flat_map do |k, v|
+        next if namespace.nil? && RESERVED_PARAMS.include?(k.to_s)
+        next if except.include?(k.to_s)
+
+        if namespace
+          k = "#{namespace}[#{k}]"
+        end
+
+        case v
+        when String, TrueClass, FalseClass
+          { k => v }
+        when Symbol
+          { k => v.to_s }
+        when Hash
+          fields_for_params(v, namespace: k)
+        when Array
+          v.map do |v|
+            { "#{k}[]" => v }
+          end
+        when nil
+          { k => "" }
+        else
+          raise TypeError, "Cannot convert #{v.class} value: #{v.inspect}"
+        end
+      end.compact
+    end
+
+    # Helper method to render a filter form
+    def active_admin_filters_form_for(search, filters, options = {})
+      defaults = { builder: ActiveAdmin::Filters::FormBuilder, url: collection_path, html: { class: "filters-form" } }
+      required = { html: { method: :get }, as: :q }
+      options = defaults.deep_merge(options).deep_merge(required)
+
+      form_for search, options do |f|
+        f.template.concat hidden_field_tags_for(params, except: except_hidden_fields)
+
+        filters.each do |attribute, opts|
+          next if opts.key?(:if) && !call_method_or_proc_on(self, opts[:if])
+          next if opts.key?(:unless) && call_method_or_proc_on(self, opts[:unless])
+
+          filter_opts = opts.except(:if, :unless)
+          filter_opts[:input_html] = instance_exec(&filter_opts[:input_html]) if filter_opts[:input_html].is_a?(Proc)
+
+          f.filter attribute, filter_opts
+        end
+
+        buttons = content_tag :div, class: "filters-form-buttons" do
+          f.submit(I18n.t("active_admin.filters.buttons.filter"), class: "filters-form-submit") +
+            link_to(I18n.t("active_admin.filters.buttons.clear"), collection_path, class: "filters-form-clear")
+        end
+
+        f.template.concat buttons
+      end
+    end
+
+    private
+
+    def except_hidden_fields
+      [:q, :page]
+    end
+  end
+end

data/app/helpers/active_admin/index_helper.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+module ActiveAdmin
+  module IndexHelper
+    def scope_name(scope)
+      case scope.name
+      when Proc then
+        self.instance_exec(&scope.name).to_s
+      else
+        scope.name.to_s
+      end
+    end
+
+    def batch_actions_to_display
+      @batch_actions_to_display ||= begin
+        if active_admin_config && active_admin_config.batch_actions.any?
+          active_admin_config.batch_actions.select do |batch_action|
+            call_method_or_proc_on(self, batch_action.display_if_block)
+          end
+        else
+          []
+        end
+      end
+    end
+
+    # 1. removes `select` and `order` to prevent invalid SQL
+    # 2. correctly handles the Hash returned when `group by` is used
+    def collection_size(c = collection)
+      return c.count if c.is_a?(Array)
+      return c.length if c.limit_value
+
+      c = c.except :select, :order
+
+      c.group_values.present? ? c.count.count : c.count
+    end
+
+    def collection_empty?(c = collection)
+      collection_size(c) == 0
+    end
+  end
+end

data/app/helpers/active_admin/layout_helper.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+module ActiveAdmin
+  module LayoutHelper
+    # Returns the current Active Admin application instance
+    def active_admin_application
+      ActiveAdmin.application
+    end
+
+    def set_page_title(title)
+      @page_title = title
+    end
+
+    def site_title
+      # Prioritize namespace and account for Devise views where namespace is not available
+      namespace = active_admin_namespace if respond_to?(:active_admin_namespace)
+      (namespace || active_admin_application).site_title(self)
+    end
+
+    def html_head_site_title(separator: "-")
+      "#{@page_title || page_title} #{separator} #{site_title}"
+    end
+
+    def action_items_for_action
+      @action_items_for_action ||= begin
+        if active_admin_config&.action_items?
+          active_admin_config.action_items_for(params[:action], self)
+        else
+          []
+        end
+      end
+    end
+
+    def sidebar_sections_for_action
+      @sidebar_sections_for_action ||= begin
+        if active_admin_config&.sidebar_sections?
+          active_admin_config.sidebar_sections_for(params[:action], self)
+        else
+          []
+        end
+      end
+    end
+
+    def skip_sidebar!
+      @skip_sidebar = true
+    end
+
+    def skip_sidebar?
+      @skip_sidebar == true
+    end
+
+    def flash_messages
+      @flash_messages ||= flash.to_hash.except(*active_admin_application.flash_keys_to_except)
+    end
+
+    def url_for_comments(*args)
+      parts = []
+      parts << active_admin_namespace.name unless active_admin_namespace.root?
+      parts << active_admin_namespace.comments_registration_name.underscore
+      parts << "path"
+      send parts.join("_"), *args
+    end
+  end
+end

data/app/javascript/active_admin/features/batch_actions.js

@@ -0,0 +1,95 @@
+import Rails from '@rails/ujs';
+
+const submitForm = function() {
+  let form = document.getElementById("collection_selection")
+  if (form) {
+    form.submit()
+  }
+}
+
+const batchActionClick = function(event) {
+  event.preventDefault()
+  let batchAction = document.getElementById("batch_action")
+  if (batchAction) {
+    batchAction.value = this.dataset.action
+  }
+
+  if (!event.target.dataset.confirm && !event.target.dataset.modalTarget) { submitForm() }
+}
+
+const batchActionConfirmComplete = function(event) {
+  event.preventDefault()
+  if (event.detail[0] === true) {
+    let batchAction = document.getElementById("batch_action")
+    if (batchAction) {
+      batchAction.value = this.dataset.action
+    }
+    submitForm()
+  }
+}
+
+const batchActionFormSubmit = function(event) {
+  event.preventDefault();
+  let json = JSON.stringify(Object.fromEntries(new FormData(this).entries()));
+  let inputsField = document.getElementById('batch_action_inputs')
+  let form = document.getElementById("collection_selection")
+  if (json && inputsField && form) {
+    inputsField.value = json
+    form.submit()
+  }
+}
+
+Rails.delegate(document, "[data-batch-action-item]", "confirm:complete", batchActionConfirmComplete)
+Rails.delegate(document, "[data-batch-action-item]", "click", batchActionClick)
+Rails.delegate(document, "form[data-batch-action-form]", "submit", batchActionFormSubmit)
+
+const disableDropdown = function(condition) {
+  const button = document.querySelector(".batch-actions-dropdown-toggle")
+  if (button) {
+    button.disabled = condition
+  }
+}
+
+const toggleAllChange = function(event) {
+  const checkboxes = document.querySelectorAll(".batch-actions-resource-selection")
+  for (const checkbox of checkboxes) {
+    checkbox.checked = this.checked
+  }
+
+  const rows = document.querySelectorAll(".paginated-collection tbody tr")
+  for (const row of rows) {
+    row.classList.toggle("selected", this.checked);
+  }
+
+  disableDropdown(!this.checked)
+}
+
+Rails.delegate(document, ".batch-actions-toggle-all", "change", toggleAllChange)
+
+const toggleCheckboxChange = function(event) {
+  const numChecked = document.querySelectorAll(".batch-actions-resource-selection:checked").length;
+  const allChecked = numChecked === document.querySelectorAll(".batch-actions-resource-selection").length;
+  const someChecked = (numChecked > 0) && (numChecked < document.querySelectorAll(".batch-actions-resource-selection").length);
+
+  const toggleAll = document.querySelector(".batch-actions-toggle-all")
+  if (toggleAll) {
+    toggleAll.checked = allChecked
+    toggleAll.indeterminate = someChecked
+  }
+
+  disableDropdown(numChecked === 0)
+}
+
+Rails.delegate(document, ".batch-actions-resource-selection", "change", toggleCheckboxChange)
+
+const tableRowClick = function(event) {
+  const type = event.target.type;
+  if (typeof type === "undefined" || (type !== "checkbox" && type !== "button" && type !== "")) {
+    const checkbox = event.target.closest("tr").querySelector("input[type=checkbox]")
+    if (checkbox) {
+      checkbox.click()
+    }
+  }
+}
+
+Rails.delegate(document, ".paginated-collection tbody td", "click", tableRowClick)

data/app/javascript/active_admin/features/dark_mode_toggle.js

@@ -0,0 +1,37 @@
+import Rails from '@rails/ujs';
+
+const THEME_KEY = "theme";
+const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+
+const setTheme = () => {
+  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+  if (localStorage.getItem(THEME_KEY) === 'dark' || (!(THEME_KEY in localStorage) && darkModeMedia.matches)) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+
+// Detect when user changes their system level preference to set theme.
+darkModeMedia.addEventListener("change", setTheme);
+
+// When the page loads, set theme. By default, uses the system preference.
+document.addEventListener("DOMContentLoaded", setTheme);
+
+// If user deletes the Local Storage key, then re-apply theme.
+window.addEventListener("storage", (event) => {
+  if (event.key === THEME_KEY) {
+    setTheme()
+  }
+});
+
+const toggleTheme = () => {
+  if (localStorage.getItem(THEME_KEY) === 'dark' || (!(THEME_KEY in localStorage) && darkModeMedia.matches)) {
+    localStorage.setItem(THEME_KEY, 'light');
+  } else {
+    localStorage.setItem(THEME_KEY, 'dark');
+  }
+  setTheme();
+};
+
+Rails.delegate(document, ".dark-mode-toggle", "click", toggleTheme);

data/app/javascript/active_admin/features/filters.js

@@ -0,0 +1,34 @@
+import Rails from '@rails/ujs';
+import { nextSibling } from 'active_admin/utils/dom'
+
+const disableEmptyFields = function(event) {
+  Array.from(this.querySelectorAll("input, select, textarea"))
+    .filter((el) => el.value === "")
+    .forEach((el) => el.disabled = true)
+};
+
+Rails.delegate(document, ".filters-form", "submit", disableEmptyFields)
+
+const setSearchType = function(event) {
+  const input = nextSibling(this, "input")
+  if (input) {
+    input.name = `q[${this.value}]`
+  }
+};
+
+Rails.delegate(document, ".filters-form-field [data-search-methods]", "change", setSearchType)
+
+const clearFiltersForm = function(event) {
+  event.preventDefault()
+
+  const regex = /^(q\[|page|utf8|commit)/
+  const params = new URLSearchParams(window.location.search)
+
+  Array.from(params.keys())
+    .filter(k => k.match(regex))
+    .forEach(k => params.delete(k))
+
+  window.location.search = params.toString()
+}
+
+Rails.delegate(document, ".filters-form-clear", "click", clearFiltersForm)

data/app/javascript/active_admin/features/has_many.js

@@ -0,0 +1,28 @@
+import Rails from '@rails/ujs';
+
+const hasManyRemoveClick = function(event) {
+  event.preventDefault()
+  const oldGroup = this.closest("fieldset")
+  if (oldGroup) {
+    oldGroup.remove()
+  }
+}
+
+Rails.delegate(document, "form .has-many-remove", "click", hasManyRemoveClick)
+
+const hasManyAddClick = function(event) {
+  event.preventDefault()
+  const parent = this.closest(".has-many-container")
+
+  let index = parseInt(parent.dataset.has_many_index || (parent.querySelectorAll('fieldset').length - 1), 10)
+  parent.dataset.has_many_index = ++index
+
+  const regex = new RegExp(this.dataset.placeholder, 'g')
+  const html = this.dataset.html.replace(regex, index)
+
+  const tempEl = document.createElement("div");
+  tempEl.innerHTML = html
+  this.before(tempEl.firstChild)
+}
+
+Rails.delegate(document, "form .has-many-add", "click", hasManyAddClick)

data/app/javascript/active_admin/features/main_menu.js

@@ -0,0 +1,12 @@
+import Rails from '@rails/ujs';
+
+const toggleMenu = function(event) {
+  const parent = this.parentNode
+  if (!("open" in parent.dataset)) {
+    parent.dataset.open = ""
+  } else {
+    delete parent.dataset.open
+  }
+}
+
+Rails.delegate(document, "#main-menu [data-menu-button]", "click", toggleMenu)

data/app/javascript/active_admin/features/per_page.js

@@ -0,0 +1,9 @@
+import Rails from '@rails/ujs';
+
+const setPerPage = function(event) {
+  const params = new URLSearchParams(window.location.search)
+  params.set("per_page", this.value)
+  window.location.search = params
+}
+
+Rails.delegate(document, ".pagination-per-page", "change", setPerPage)

data/app/javascript/active_admin/utils/dom.js

@@ -0,0 +1,17 @@
+const nextSibling = function next(element, selector) {
+  let sibling = element.nextElementSibling;
+
+  if (!selector) {
+    return sibling;
+  }
+
+  while (sibling) {
+    if (sibling && sibling.matches(selector)) {
+      return sibling;
+    }
+
+    sibling = sibling.nextElementSibling;
+  }
+}
+
+export { nextSibling }

data/app/javascript/active_admin.js

@@ -0,0 +1,10 @@
+import "flowbite"
+import Rails from "@rails/ujs"
+import "active_admin/features/batch_actions"
+import "active_admin/features/dark_mode_toggle"
+import "active_admin/features/has_many"
+import "active_admin/features/filters"
+import "active_admin/features/main_menu"
+import "active_admin/features/per_page"
+
+Rails.start()

data/app/views/active_admin/_flash_messages.html.erb

@@ -0,0 +1,22 @@
+<% if flash_messages.present? %>
+  <div class="px-2.5 lg:px-5 mb-8">
+    <% flash_messages.each do |type, message| %>
+      <% if type == "error" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300">
+          <svg class="w-5 h-5 shrink-0 text-red-400 dark:text-red-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
+          <%= message %>
+        </div>
+      <% elsif type == "alert" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-yellow-50 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-300">
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100 text-yellow-400 dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/></svg>
+          <%= message %>
+        </div>
+      <% elsif type == "notice" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-green-50 text-green-800 dark:bg-green-800 dark:text-green-300">
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100 text-green-400 dark:text-green-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/></svg>
+          <%= message %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/active_admin/_html_head.html.erb

@@ -0,0 +1,13 @@
+<%= stylesheet_link_tag "active_admin" %>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<% # On page load or when changing themes, best to add inline in `head` to avoid FOUC %>
+<%= javascript_tag nonce: true do %>
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+<% end %>
+<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>

data/app/views/active_admin/_main_navigation.html.erb

@@ -0,0 +1,28 @@
+<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 start-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-e xl:border-gray-200 xl:dark:border-white/10" tabindex="-1">
+  <ul role="list" class="flex flex-1 flex-col space-y-1.5">
+    <% current_menu.items(self).each do |item| %>
+      <% children = item.items(self).presence %>
+      <li <%= current_menu_item?(item) && "data-open" %> class="group" data-item-id="<%= item.id %>">
+        <% if children %>
+          <button data-menu-button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm" aria-label="<%= t('active_admin.toggle_section') %>">
+            <%= item.label(self) %>
+            <svg class="group-data-[open]:rotate-90 group-data-[open]:rtl:-rotate-90 ms-auto h-5 w-5 shrink-0 rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <ul role="list" class="mt-1 space-y-1 hidden group-data-[open]:block">
+            <% children.each do |j| %>
+              <li data-item-id="<%= j.id %>">
+                <%= link_to j.label(self), j.url(self), j.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white block rounded-md py-1.5 px-2 text-sm no-underline #{(current_menu_item?(j) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+              </li>
+            <% end %>
+          </ul>
+        <% elsif url = item.url(self) %>
+          <%= link_to item.label(self), url, item.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm no-underline #{(current_menu_item?(item) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+        <% else %>
+          <%= item.label(self) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>