[62]Bootstrap |ナビゲーションバー<< [ホームに戻る] >> [64]Bootstrap | 氏名認証
デバイスの設定部分は「06 | デバイス(devise)」と同じです。
Bootstrap用に書き換えた部分を載せていきます。
ナビゲーションバーに「新規ユーザ登録」「ログイン」「ログアウト」のリンクを追加する変更です。
記述更新 app\views\shared\_navbar.html.erb
<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"> <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %> </li> <li class="nav-item"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %> </li> <!-- ログインしていたら --> <% else %> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <%= current_user.email %> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span> <hr/> <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span> </div> </li> <% end %> </ul> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 3;"> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;"> <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span> </li> <li class="nav-item dropdown" style="margin-right: 50px;"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-hospital-symbol"></i> ホスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="fas fa-edit"></i></i></span> <span class="dropdown-item"><i class="far fa-list-alt"></i></span> <span class="dropdown-item"><i class="far fa-list-alt"></i></span> <span class="dropdown-item"><i class="far fa-calendar-alt"></i></span> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-user-friends"></i> ゲスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="far fa-list-alt"></i></span> <span class="dropdown-item"><i class="far fa-credit-card"></i></span> </div> </li> </ul> </div> </nav> <% end %>
ブラウザ確認
http://localhost:3000/
「新規ユーザ登録」ボタンを押します。
メールアドレス、パスワードを2回入力して「sign up」ボタンを押します。
ドロップダウンメニューで「ログアウト」できます。
Posticoでユーザテーブルを確認してみます。
Windowsの場合はHeidiSQLで確認します。
↓↓クリックして頂けると励みになります。