Make sidebar navigation collapsible

Closes #3198

app/helpers/rails_admin/application_helper.rb

@@ -86,7 +86,7 @@ def main_navigation
 
         label = navigation_label || t('admin.misc.navigation')
 
-        %(<li class='dropdown-header'>#{label}</li>#{li_stack}) if li_stack.present?
+        collapsible_stack(label, 'main', li_stack)
       end.join.html_safe
     end
 
@@ -101,18 +101,17 @@ def root_navigation
         end.join.html_safe
         label ||= t('admin.misc.root_navigation')
 
-        %(<li class='dropdown-header'>#{label}</li>#{li_stack}) if li_stack.present?
+        collapsible_stack(label, 'action', li_stack)
       end.join.html_safe
     end
 
     def static_navigation
       li_stack = RailsAdmin::Config.navigation_static_links.collect do |title, url|
         content_tag(:li, link_to(title.to_s, url, target: '_blank', rel: 'noopener noreferrer', class: 'nav-link'))
-      end.join
+      end.join.html_safe
 
       label = RailsAdmin::Config.navigation_static_label || t('admin.misc.navigation_static_label')
-      li_stack = %(<li class='dropdown-header'>#{label}</li>#{li_stack}).html_safe if li_stack.present?
-      li_stack
+      collapsible_stack(label, 'static', li_stack) || ''
     end
 
     def navigation(parent_groups, nodes, level = 0)
@@ -232,5 +231,21 @@ def edit_user_link_label
     def gravatar_url(email)
       "https://secure.gravatar.com/avatar/#{Digest::MD5.hexdigest email}?s=30"
     end
+
+    def collapsible_stack(label, class_prefix, li_stack)
+      return nil unless li_stack.present?
+
+      collapse_classname = "#{class_prefix}-#{Digest::MD5.hexdigest(label)[0..7]}"
+      content_tag(:li, class: 'mb-1') do
+        content_tag(:button, 'aria-expanded': true, class: 'btn btn-toggle align-items-center rounded', data: {bs_toggle: "collapse", bs_target: ".sidebar .#{collapse_classname}"}) do
+          content_tag(:i, '', class: 'fas fa-chevron-down') + html_escape(' ' + label)
+        end +
+          content_tag(:div, class: "collapse show #{collapse_classname}") do
+            content_tag(:ul, class: 'btn-toggle-nav list-unstyled fw-normal pb-1') do
+              li_stack
+            end
+          end
+      end
+    end
   end
 end

app/views/layouts/rails_admin/_sidebar_navigation.html.erb

@@ -1,4 +1,4 @@
-<ul class="col-sm-3 col-md-2 btn-toggle-nav list-unstyled bg-light">
+<ul class="sidebar col-sm-3 col-md-2 btn-toggle-nav list-unstyled bg-light">
   <%= main_navigation %>
   <%= root_navigation %>
   <%= static_navigation %>

spec/helpers/rails_admin/application_helper_spec.rb

@@ -250,7 +250,7 @@
         RailsAdmin.config do |config|
           config.included_models = [Ball, Comment]
         end
-        expect(helper.main_navigation).to match(/(dropdown-header).*(Navigation).*(Balls).*(Comments)/m)
+        expect(helper.main_navigation).to match(/(btn-toggle).*(Navigation).*(Balls).*(Comments)/m)
       end
 
       it 'does not draw empty navigation labels' do
@@ -263,8 +263,8 @@
             label_plural 'Confirmed'
           end
         end
-        expect(helper.main_navigation).to match(/(dropdown-header).*(Navigation).*(Balls).*(Commentz).*(Confirmed)/m)
-        expect(helper.main_navigation).not_to match(/(dropdown-header).*(Navigation).*(Balls).*(Commentz).*(Confirmed).*(Comment)/m)
+        expect(helper.main_navigation).to match(/(btn-toggle).*(Navigation).*(Balls).*(Commentz).*(Confirmed)/m)
+        expect(helper.main_navigation).not_to match(/(btn-toggle).*(Navigation).*(Balls).*(Commentz).*(Confirmed).*(Comment)/m)
       end
 
       it 'does not show unvisible models' do
@@ -275,7 +275,7 @@
           end
         end
         result = helper.main_navigation
-        expect(result).to match(/(dropdown-header).*(Navigation).*(Balls)/m)
+        expect(result).to match(/(btn-toggle).*(Navigation).*(Balls)/m)
         expect(result).not_to match('Comments')
       end
 
@@ -286,14 +286,14 @@
             hide
           end
         end
-        expect(helper.main_navigation).to match(/(dropdown-header).*(Navigation).*(Hardballs)/m)
+        expect(helper.main_navigation).to match(/(btn-toggle).*(Navigation).*(Hardballs)/m)
       end
 
       it 'shows children of excluded models' do
         RailsAdmin.config do |config|
           config.included_models = [Hardball]
         end
-        expect(helper.main_navigation).to match(/(dropdown-header).*(Navigation).*(Hardballs)/m)
+        expect(helper.main_navigation).to match(/(btn-toggle).*(Navigation).*(Hardballs)/m)
       end
 
       it 'nests in navigation label' do
@@ -303,7 +303,7 @@
             navigation_label 'commentable'
           end
         end
-        expect(helper.main_navigation).to match(/(dropdown-header).*(commentable).*(Comments)/m)
+        expect(helper.main_navigation).to match(/(btn-toggle).*(commentable).*(Comments)/m)
       end
 
       it 'nests in parent model' do

spec/integration/rails_admin_spec.rb

@@ -75,6 +75,27 @@
     end
   end
 
+  describe 'sidebar navigation', js: true do
+    it 'is collapsible' do
+      visit dashboard_path
+      is_expected.to have_css('.sidebar .nav-link', text: 'Players')
+      click_button 'Navigation'
+      is_expected.to have_css('.sidebar .btn-toggle.collapsed')
+      is_expected.not_to have_css('.sidebar #navigation.show')
+      is_expected.not_to have_css('.sidebar .nav-link', text: 'Players')
+    end
+
+    it 'persists over a page transition' do
+      visit dashboard_path
+      click_button 'Navigation'
+      is_expected.to have_css('.sidebar .btn-toggle.collapsed')
+      is_expected.not_to have_css('.sidebar #navigation.show')
+      find('.player_links .show a').trigger('click')
+      is_expected.to have_content 'List of Players'
+      is_expected.not_to have_css('.sidebar .nav-link', text: 'Players')
+    end
+  end
+
   describe '_current_user' do # https://github.com/railsadminteam/rails_admin/issues/549
     it 'is accessible from the list view' do
       RailsAdmin.config Player do

src/rails_admin/styles/base/theming.scss

@@ -29,18 +29,22 @@ body.rails_admin {
   }
 
   /* Sidebar navigation */
-  .btn-toggle-nav {
+  .sidebar.btn-toggle-nav {
     padding: 0;
 
-    .dropdown-header {
-      padding: calc($grid-gutter-width / 2) calc($grid-gutter-width / 2) 3px;
+    .btn-toggle {
+      margin-top: calc(#{$grid-gutter-width} / 2);
+      padding: 3px calc(#{$grid-gutter-width} / 2);
       font-weight: bold;
+      color: $gray-600;
+    }
+
+    .btn-toggle[aria-expanded="true"] {
       color: $gray-700;
-      text-transform: uppercase;
     }
 
-    > li > a {
-      padding: calc($navbar-padding-y / 2) calc($grid-gutter-width / 2);
+    .btn-toggle-nav > li > a {
+      padding: calc(#{$navbar-padding-y} / 2) calc(#{$grid-gutter-width} / 2);
 
       &.active {
         background-color: map-get($theme-colors, primary);
@@ -320,7 +324,7 @@ body.rails_admin {
 
 @media screen and (min-width: map-get($grid-breakpoints, "sm")) {
   body.rails_admin {
-    .btn-toggle-nav {
+    .sidebar.btn-toggle-nav {
       position: fixed;
       top: $nav-link-height + $navbar-padding-y * 2;
       bottom: 0;

src/rails_admin/ui.js

@@ -9,10 +9,30 @@ import I18n from "./i18n";
 
   $(document)
     .on("turbo:click", function () {
-      return $("#loading").show();
+      $("#loading").show();
     })
-    .on("turbo:before-render", function () {
-      return $("#loading").hide();
+    .on("turbo:before-render", function (event) {
+      document
+        .querySelectorAll('.sidebar .btn-toggle[aria-expanded="false"]')
+        .forEach((element) => {
+          const newButton = event.detail.newBody.querySelector(
+            `.sidebar [data-bs-target="${element.dataset.bsTarget}"]`
+          );
+          const newMenu = event.detail.newBody.querySelector(
+            element.dataset.bsTarget
+          );
+          if (newButton) {
+            newButton.parentNode.replaceChild(
+              element.cloneNode(true),
+              newButton
+            );
+          }
+          if (newMenu) {
+            newMenu.classList.remove("show");
+          }
+        });
+
+      $("#loading").hide();
     });
 
   $(document).on("click", "[data-bs-target]", function () {