No release in over 3 years
Low commit activity in last 3 years
extension for activeadmin gem to manage sidebar
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

 Project Readme

Gem Version NPM Version npm

ActiveAdmin Sidebar

Provides ability to manipulate sidebar position for ActiveAdmin (tested with ActiveAdmin ~> 1.0.0)

Install

Add following line to the Gemfile

gem 'active_admin_sidebar'
Using assets via Sprockets

Add following line to the app/assets/stylesheets/active_admin.css.scss

  @import "active_admin_sidebar";

If you want to use collapsing feature, add following line

  //= require active_admin_sidebar

to the app/assets/javascripts/active_admin.js

Using assets via Webpacker (or any other assets bundler) as a NPM module (Yarn package)

Execute:

$ npm i @activeadmin-plugins/active_admin_sidebar

Or

$ yarn add @activeadmin-plugins/active_admin_sidebar

Or add manually to package.json:

"dependencies": {
  "@activeadmin-plugins/active_admin_sidebar": "2.0.0"
}

and execute:

$ yarn

Add the following line into app/assets/javascripts/active_admin.js:

import '@activeadmin-plugins/active_admin_sidebar';

Add the following line into app/assets/stylesheets/active_admin.scss:

@import '@activeadmin-plugins/active_admin_sidebar';

Configuration per resource

Changing sidebar position dynamically with before_action

  # app/admin/posts.rb
  ActiveAdmin.register Post do
    before_action :left_sidebar!, only: [:show]
  end

  # app/admin/comments.rb
  ActiveAdmin.register Comment do
    before_action :right_sidebar!
  end

Global configuration

Moving sidebar to the left within all resource. Set configuration in config/initializers/active_admin.rb

  # == Controller before-actions
  #
  # You can add before, after and around actions to all of your resources
  ActiveAdmin.setup do |config|
    config.before_action do
      left_sidebar! if respond_to?(:left_sidebar!)
    end
  end

Collapsing sidebar

You can use sidebar collapsing. It will add "hide/show" button. Shown/Hidden state is persisted across all pages.

  left_sidebar!(collapsed: true)

You can override button color according to your color theme. For example:

  body.active_admin {
    #active_admin_content.left_sidebar, #active_admin_content.collapsed_sidebar {
      .collapse_btn, .uncollapse_btn {
          background-color: #767270;
      }
    }
   }

Example

Alt text