JSPM

@activeadmin-plugins/active_admin_sidebar

2.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 434
  • Score
    100M100P100Q108974F
  • License MIT

Extension for ActiveAdmin gem to manage sidebar

Package Exports

  • @activeadmin-plugins/active_admin_sidebar
  • @activeadmin-plugins/active_admin_sidebar/src/active_admin_sidebar.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@activeadmin-plugins/active_admin_sidebar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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