【オリジナルアプリ】トップページ作成2
前回の続きから！
※プログラミング初心者のため記述が誤っている場合がございます。
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-dark py-3 sticky-top">
<div class="container">
<%# タイトルクリックでトップページへ遷移 %>
<a class="navbar-brand" href="<%= root_path %>">
<h2 class="pt-2 text-white custom-font">D recipe</h2>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<% if current_user %>
<li class="nav-item">
<p>マイページ</p>
<%= link_to user_path(current_user) do %>
<%= image_tag("human.png", alt: "My Page Icon", class: "footer-icon") %>
<% end %>
</li>
<% end %>
</ul>
<% if user_signed_in? %>
<div class="user_nav grid-6">
<%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-light rounded-btn" %>
</div>
<% else %>
<div class="grid-6">
<%= link_to "ログイン", new_user_session_path, class: "btn btn-light rounded-btn" %>
<%= link_to "新規登録", new_user_registration_path, class: "btn btn-light rounded-btn" %>
</div>
<% end %>
</div>
</div>
</nav>
<%= yield %>
<footer>
<div class="footer-top">
<div class="container">
<div class="row gy-4 justify-content-center">
<div class="col-md-12 text-center">
<h4 class="text-white">D recipe@2024</h4>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>container: コンテナクラスで、中央揃えとレスポンシブなレイアウトを提供します。
row gy-4 justify-content-center: Bootstrapの行と余白、中央揃えのクラス。
col-md-12 text-center: フッター内のコンテンツを中央揃えするクラス。
footer-top: フッターのトップ部分のスタイルを定義するクラス。
こだわったポイント
☆タイトルを押すとトップページに遷移する
☆マイページに遷移するときは'人'のアイコンを使用（文字だけだと味気ないと思ったので😊）
☆ログインしている、していないで新規登録、ログイン、ログアウトのボタンが表示されるようにした