Help us understand the problem. What is going on with this article?

ActiveAdminの上のところのメニューバーを、ボタンで表示・非表示を切り替えたい

More than 1 year has passed since last update.

はじめに

「ActiveAdminの上のところのメニューバーを、ボタンで表示・非表示を切り替えたいです。使わないとき邪魔です。」

という意見を実際に使ってる方々から頂いたので、あまり裏側をごにょごにょしないで解決できないかなーと思って、CSSで無理やり隠しました。

ActiveAdminあんまり触ったことないので、Viewが自動生成されるのって便利だけどブラックボックスっぽくてなんかアレ。作り込むならActiveAdmin使わない方がいいんだろうけど、ActiveAdminで作ってからアレもコレも欲しくなったりするのかな...

環境

  • Railsアプリケーション
  • ActiveAdmin使ってる
  • パーシャルでActiveAdminのViewを拡張(?)してる

方針

  1. CSSで display: none;にして消す
  2. 適当なボタンを作って、jQueryで押したら表示できるようにする

条件

  • Globalでメニューを非表示にするのは色々と不都合だったので、/admin/hogehogeでのみメニューを非表示にしたい。
  • 管理画面なのでボタンの見た目とかはそんなにこだわりない。

内容

assets/stylesheets/admin/style/hogehoge.scss
/*必要に応じてスタイリングしてください。*/
/*assets/stylesheets/active_admin.scssに書くとグローバルに適応されちゃいます*/
#header {
  display: none;
}
app/views/admin/hogehoge/_index.html.haml
%button.btn{ id: 'show_menu', onclick: "show_menu('hoge')" } |
  Menu
app/assets/javascripts/admin/js/hogehoge.js.coffee
window.show_menu = (show_menu) ->
  $("#header").toggle()

これでデフォルトではメニューを非表示にして、ボタンを押すと表示・非表示の切り替えができるようになります。

補足

Viewにおけるonclick: "show_menu('hoge')"と、Coffeeにおける引数のshow_menuに関して。
引数を渡す必要ないやん使ってないやん?って思うところではあるんですが、私の手元では引数を渡してあげないと動作しませんでした。なんでやろ...

おわり。

もっといいやり方あるやん!とかあればぜひコメントにてご教授ください。jQuery久しぶりに触った。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした