Add missing link to parent menu item

Currently when rendering a nested menu, if the parent menu item
links to a url, the link is not rendered for the parent item
and there is no way to navigate to it.

app/controllers/active_admin/base_controller/menu.rb

@@ -17,8 +17,8 @@ def current_menu
         active_admin_config.navigation_menu
       end
 
-      def current_menu_item?(item)
-        item.current?(@current_menu_item)
+      def current_menu_item?(item, children: true)
+        item.current?(@current_menu_item, children: children)
       end
 
       def set_current_menu_item

app/javascript/active_admin/features/main_menu.js

@@ -1,7 +1,8 @@
 import Rails from '@rails/ujs';
 
-const toggleMenu = function(event) {
-  const parent = this.parentNode
+const toggleMenu = function() {
+  const parent = this.closest([`[data-item-id="${this.dataset.parentId}"]`])
+
   if (!("open" in parent.dataset)) {
     parent.dataset.open = ""
   } else {

app/views/active_admin/_main_navigation.html.erb

@@ -3,24 +3,32 @@
     <% 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">
+        <% label = capture do %>
+          <% if (url = item.url(self)).present? %>
+            <%= 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, children: false) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+          <% else %>
             <%= 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>
+          <% end %>
+        <% end %>
+
+        <% if children %>
+          <div class="flex gap-2">
+            <div class="flex-auto"><%= label %></div>
+            <button data-parent-id="<%= item.id %>" data-menu-button class="bg-gray-100 dark:bg-white/5 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center rounded-full p-2 text-sm">
+              <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>
+          </div>
           <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) %>
+          <%= label %>
         <% end %>
       </li>
     <% end %>

features/step_definitions/menu_steps.rb

@@ -12,7 +12,7 @@
 end
 
 Then /^I should see a menu parent for "([^"]*)"$/ do |name|
-  expect(page).to have_css "#main-menu li button", text: name
+  expect(page).to have_css "#main-menu li a", text: name
 end
 
 Then /^I should see a nested menu item for "([^"]*)"$/ do |name|

lib/active_admin/menu.rb

@@ -66,8 +66,8 @@ def include?(item)
       end
 
       # Used in the UI to visually distinguish which menu item is selected.
-      def current?(item)
-        self == item || include?(item)
+      def current?(item, children: true)
+        self == item || (children ? include?(item) : false)
       end
 
       # Returns sorted array of menu items that should be displayed in this context.