[36]ホームページ << [ホームに戻る] >> [38]Stripe（ストライプ）
ナビゲーションバーのアイコンにステータス表示が出るようにします。
「app\views\shared\_navbar.html.erb」ファイルの記述を更新します。
記述更新 app\views\shared\_navbar.html.erb
48行目の記述を以下の記述に置き換えます。
<figure class="image is-48x48 m-r-5 avatar <%= current_user.status ? "online" : "offline" %>">
app\views\shared\_navbar.html.erb
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> <%= form_tag search_path, method: :get do %> <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> <div class="control has-icons-left"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> </div> <div class="control"> <button class="button is-success" type="submit">検索</button> </div> </div> <% end %> </div> </div> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> <figure class="image is-48x48 m-r-5 avatar <%= current_user.status ? "online" : "offline" %>"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <%= current_user.full_name %> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) && !current_page?(root_path) && !current_page?(search_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を売る人</a> <div class="navbar-dropdown"> <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> <%= link_to '売れた注文の確認', selling_orders_path, class: "navbar-item" %> <%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %> <%= link_to '申込みの確認', my_offers_path, class: "navbar-item" %> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <%= link_to '買った注文の確認', buying_orders_path, class: "navbar-item" %> <%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %> <%= link_to 'リクエストの確認', requests_path, class: "navbar-item" %> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
ブラウザ確認
http://localhost:3000/
ステータスがオフラインの時はアイコンがオフラインマークになっています。
ステータスをオンラインに変更します。
アイコンがオンラインマークになりました。
↓↓クリックして頂けると励みになります。
