Redesign collapsible sidebar with toggle button and vanilla AA fallback

- Fall back to vanilla ActiveAdmin build_page_content when no sidebar
  options are set, producing identical HTML for unmodified resources
- Replace separate collapse/uncollapse buttons with a single toggle
  button positioned at the sidebar edge using absolute positioning
- Toggle button arrow icon flips direction on collapse/expand via
  icono-caret class swap
- Sidebar collapses to width:0 with CSS transitions instead of
  display:none, allowing smooth animation and proper content reflow
- Add per-resource sidebar state isolation via session keys
- Support collapsible: true and collapsed: true options for both
  left_sidebar! and right_sidebar! with backward compatibility
- Add deprecation warning for old collapsed-only API

Author: Fivell

app/assets/javascripts/active_admin_sidebar.js

@@ -1,26 +1,44 @@
 (function() {
   $(document).ready(function() {
-    var $aa_content, set_collapsed_sidebar;
+    var $aa_content, set_collapsed_sidebar, isLeftSidebar, collapseIcon, expandIcon;
     if ($('body').hasClass('index') && ($('#active_admin_content').hasClass('collapsible_sidebar'))) {
       $aa_content = $('#active_admin_content');
-      $aa_content.find('.sidebar_section:first>h3').append('<span class="collapse_btn icono-caret-left" title="Hide sidebar"></span>');
-      $aa_content.prepend('<span class="uncollapse_btn icono-caret-right" title="Show sidebar"></span>');
+      isLeftSidebar = $aa_content.hasClass('left_sidebar');
+      var isCollapsed = $aa_content.hasClass('collapsed_sidebar');
+
+      if (isLeftSidebar) {
+        collapseIcon = 'icono-caret-left';
+        expandIcon = 'icono-caret-right';
+      } else {
+        collapseIcon = 'icono-caret-right';
+        expandIcon = 'icono-caret-left';
+      }
+
+      var initialIcon = isCollapsed ? expandIcon : collapseIcon;
+      var $toggleBtn = $('<span class="sidebar_toggle_btn ' + initialIcon + '" title="Toggle sidebar"></span>');
+
+      // Place button inside #sidebar but outside .sidebar_section
+      // so it stays visible when sections are hidden
+      var $sidebar = $aa_content.find('#sidebar');
+      $sidebar.prepend($toggleBtn);
+
       set_collapsed_sidebar = function(value) {
         return $.getJSON(this.href, {
           collapsed_sidebar: value
         });
       };
-      return $aa_content.on('click', '.collapse_btn, .uncollapse_btn', function(e) {
+
+      $toggleBtn.on('click', function(e) {
         if (!$aa_content.hasClass('collapsed_sidebar')) {
           set_collapsed_sidebar(true);
-          $aa_content.removeClass('left_sidebar');
           $aa_content.addClass('collapsed_sidebar');
-          return $aa_content.trigger('collapsible_sidebar:collapsed');
+          $toggleBtn.removeClass(collapseIcon).addClass(expandIcon);
+          $aa_content.trigger('collapsible_sidebar:collapsed');
         } else {
           set_collapsed_sidebar(false);
           $aa_content.removeClass('collapsed_sidebar');
-          $aa_content.addClass('left_sidebar');
-          return $aa_content.trigger('collapsible_sidebar:uncollapsed');
+          $toggleBtn.removeClass(expandIcon).addClass(collapseIcon);
+          $aa_content.trigger('collapsible_sidebar:uncollapsed');
         }
       });
     }

app/assets/stylesheets/active_admin_sidebar.scss

@@ -1,7 +1,12 @@
 @import "active_admin_sidebar_pure_icons";
 
+$toggle-btn-size: 19px;
+
+// === Left sidebar layout ===
+// Moves sidebar before main content in the DOM, so we need to
+// reverse the default AA float layout.
 body.active_admin {
-  #active_admin_content.left_sidebar, #active_admin_content.collapsed_sidebar {
+  #active_admin_content.left_sidebar {
     #sidebar {
       display: block;
       margin-left: 0;
@@ -25,67 +30,110 @@ body.active_admin {
       float: inherit;
       margin-left: 298px;
       width: auto;
+
       #main_content {
         float: inherit;
         margin: 0;
-        .tabs .comments {
-          .active_admin_comment {
-            clear: none;
-          }
+
+        .tabs .comments .active_admin_comment {
+          clear: none;
         }
       }
-
     }
 
     .table_tools:after {
       clear: none;
       padding-bottom: 16px;
     }
+  }
+}
 
-    .collapse_btn, .uncollapse_btn {
-      background-color: #767270;
-      border-radius: 5px;
-      color: #ffffff;
-      cursor: pointer;
-    }
+// === Collapsible sidebar: toggle button ===
+body.active_admin #active_admin_content.collapsible_sidebar {
+  #sidebar {
+    position: relative;
+    transition: width 0.25s ease, margin-left 0.25s ease;
+  }
 
-    .collapse_btn {
-      clear: both;
-      display: block;
-      float: right;
-    }
+  #main_content_wrapper #main_content {
+    transition: margin 0.25s ease;
+  }
 
-    .uncollapse_btn {
-      display: none;
-      margin-top: 5px;
-      position: absolute;
-    }
+  #main_content_wrapper {
+    transition: margin 0.25s ease;
+  }
 
+  .sidebar_toggle_btn {
+    background-color: #767270;
+    border-radius: 3px;
+    color: #ffffff;
+    cursor: pointer;
+    z-index: 10;
+    // Override icono's position: relative so absolute works
+    position: absolute !important;
+    top: 5px;
+  }
+
+  // Left sidebar: button flush on the right edge of sidebar
+  &.left_sidebar .sidebar_toggle_btn {
+    right: -$toggle-btn-size;
+  }
+
+  // Right sidebar: button flush on the left edge of sidebar
+  &:not(.left_sidebar) .sidebar_toggle_btn {
+    left: -$toggle-btn-size;
   }
 }
 
-body.active_admin #active_admin_content.collapsed_sidebar {
+// === Collapsed state: left sidebar ===
+body.active_admin #active_admin_content.collapsible_sidebar.collapsed_sidebar.left_sidebar {
+  #sidebar {
+    width: 0;
+    overflow: visible;
+
+    .sidebar_section {
+      display: none;
+    }
+  }
+
+  .sidebar_toggle_btn {
+    right: -$toggle-btn-size;
+  }
 
   #main_content_wrapper {
-    margin-left: 30px;
+    margin-left: $toggle-btn-size + 8px;
   }
+}
 
+// === Collapsed state: right sidebar (default AA position) ===
+body.active_admin #active_admin_content.collapsible_sidebar.collapsed_sidebar:not(.left_sidebar) {
   #sidebar {
-    display: none;
+    width: 0;
+    margin-left: 0;
+    overflow: visible;
+
+    .sidebar_section {
+      display: none;
+    }
   }
 
-  .uncollapse_btn {
-    display: block;
+  .sidebar_toggle_btn {
+    left: -$toggle-btn-size;
   }
 
+  #main_content_wrapper #main_content {
+    margin-right: $toggle-btn-size + 8px;
+  }
 }
 
-body.active_admin.index #active_admin_content.with_sidebar.collapsible_sidebar {
+// === Left sidebar expanded + collapsible: fix margin ===
+body.active_admin.index #active_admin_content.with_sidebar.left_sidebar.collapsible_sidebar {
   #main_content_wrapper #main_content {
     margin-right: 0;
   }
 }
 
+// === Comments overflow fix ===
 .with_sidebar .comments .active_admin_comment {
   overflow: auto;
 }

lib/active_admin_sidebar/activeadmin_views_pages_base.rb

@@ -1,6 +1,9 @@
 module ActiveAdminSidebar::ActiveAdminViewsPagesBase
 
   def build_page_content
+    # When no sidebar options are set, fall back to vanilla ActiveAdmin behavior
+    return super unless sidebar_options_present?
+
     build_flash_messages
     div id: "active_admin_content", class: main_content_classes do
       build_sidebar unless skip_sidebar? || right_sidebar?
@@ -17,12 +20,16 @@ def build_sidebar
     end
   end
 
+  def sidebar_options_present?
+    assigns[:sidebar_options].present?
+  end
+
   def left_sidebar?
     assigns[:sidebar_options].try!(:[], :position) == :left
   end
 
   def collapsible_sidebar?
-    left_sidebar? && !!assigns[:sidebar_options].try!(:[], :collapsed)
+    !!assigns[:sidebar_options].try!(:[], :collapsible)
   end
 
   def sidebar_is_collapsed?
@@ -40,6 +47,7 @@ def main_content_classes
     else
       classes << "with_sidebar"
       classes << "left_sidebar" if left_sidebar?
+      classes << "right_sidebar" if right_sidebar?
       if collapsible_sidebar?
         classes << "collapsible_sidebar"
         classes << "collapsed_sidebar" if sidebar_is_collapsed?

lib/active_admin_sidebar/positions.rb

@@ -2,24 +2,54 @@ module ActiveAdminSidebar
   module Positions
     def left_sidebar!(options = {})
       @sidebar_options = { position: :left }
-      if options.fetch(:collapsed, false)
-        collapsed_sidebar
-        @sidebar_options.merge!(
-          is_collapsed: session[:collapsed_sidebar],
-          collapsed: true
+
+      collapsible = options.fetch(:collapsible, false)
+      collapsed   = options.fetch(:collapsed, false)
+
+      # Backward compatibility: `collapsed: true` without `collapsible:` means collapsible (not start-collapsed)
+      if collapsed && !options.key?(:collapsible)
+        collapsible = true
+        collapsed = false
+        ActiveSupport::Deprecation.warn(
+          "left_sidebar!(collapsed: true) is deprecated. " \
+          "Use left_sidebar!(collapsible: true) instead, or " \
+          "left_sidebar!(collapsible: true, collapsed: true) to start collapsed."
         )
       end
+
+      apply_collapsible_options(collapsible, collapsed) if collapsible
     end
 
-    def right_sidebar!
+    def right_sidebar!(options = {})
       @sidebar_options = { position: :right }
+
+      collapsible = options.fetch(:collapsible, false)
+      collapsed   = options.fetch(:collapsed, false)
+
+      apply_collapsible_options(collapsible, collapsed) if collapsible
+    end
+
+    private
+
+    def apply_collapsible_options(collapsible, collapsed)
+      session_key = :"collapsed_sidebar_#{controller_name}"
+      handle_collapsed_sidebar_request(session_key)
+      is_collapsed = if session[session_key].nil?
+                       collapsed
+                     else
+                       session[session_key]
+                     end
+      @sidebar_options.merge!(
+        collapsible: true,
+        is_collapsed: is_collapsed
+      )
     end
 
-    def collapsed_sidebar
+    def handle_collapsed_sidebar_request(session_key)
       if request.xhr?
         if params[:collapsed_sidebar].present?
           collapsed = params[:collapsed_sidebar].to_s == 'true'
-          session[:collapsed_sidebar] = collapsed
+          session[session_key] = collapsed
           render json: { collapsed_sidebar: collapsed } and return
         end
       end