bootstrapでメニュー等をつけてアプリらしく

ここまででユーザの情報の表示と編集画面をつくることができました。

次に、bootstrap のサンプル風にメニューバーをつけていきます。メニューバーは、ログイン時にはアカウント情報とアカウント編集とログアウトのメニューを、ログインしていない場合はログイン画面へのリンクを表示することとします。

Controller ごとの layout の変更

Controller ごとに layout を指定するには、各コントローラで layout で app/views/layouts 以下のファイルを指定します。
例えば、account controller の表示レイアウトを変更したい場合、app/views/layouts/account.html.erb を用意し、accout controller で以下のように指定します。

layout の設計

以下のように画面を想定します。

  1. ログインしていない状況でサーバにアクセスすると、home 画面を表示。メニューバーにはログインとサインアップへのリンク
  2. ログインへのリンクをクリックすると、ログイン画面を表示。ログイン画面にはメニューバー無し。
  3. サインアップへのリンクをクリックすると、サインアップ画面を表示。サインアップ画面にはメニューバー無し
  4. ログイン後は home 画面に戻る。メニューバーにはユーザ名とアバターを表示。クリックするとアカウント情報の表示とログアウトへのリンクを表示
  5. アカウント情報の表示と編集はメニューバーあり。ログイン状態のメニューバーを表示

ということで、ログイン画面を表示する app/controllers/users/sessions_controller.rb と app/controllers/users/registrations_controller.rb で devise 用のメニューバー無しのレイアウトを適用、それ以外は application 用のレイアウトで、ログイン状態かどうかでメニューバーの内容を帰ることにします。

devise 用の layout の用意と適用

これは単純に現状の application.html.erb がメニューバー無しの状態なので、これをコピーして、devise 関連の各コントローラで適用します。

このあと rails サーバを再起動してサインインしようとすると、以下のログが表示されて app/views/layouts/devise.html.erb を使用して表示されているのがわかります。

application 全体用の layout の用意

app/views/layouts/application.html.erb にメニューを追記します。ログイン状態とそうでない状態の partial な view を定義して、ログインしているかどうかで切り替えます。

用意したファイルはこんな感じです。

layouts 以下の application.html.erb で _navbar.html.erb を render partial で読み込み、_navbar.html.erb 内部でユーザがログインしているかどうかで _menu_logged_in.html.erb を使うか _menu_default.html.erb を使うかを判断して render partial で読み込みます。

メニューに対応した style の指定

sticky なメニューを定義すると、コンテンツがメニューにかぶって表示されてしまうので、stylesheet で body を menu の分だけ下にずらします。また、各 view で上部に隙間を開けるために入れていた mt-5 を削除します。
今回は、application.scss は、もろもろの import のみを記述するポリシーとして、アプリケーション全体への css を記述する devise_test.scss を作成し、これを application.scss で import することにしました。

スクリーンショット

ここまでの変更でだいたい以下のような画面がみえるようになりました。

最初の画面

ログイン画面

登録画面

ログイン後

ドロップダウンメニュー

アカウント情報表示

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です