見出し画像

【オリジナルアプリ】トップページ作成2

ono

前回の続きから！
※プログラミング初心者のため記述が誤っている場合がございます。
　

<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: フッターのトップ部分のスタイルを定義するクラス。

こだわったポイント
☆タイトルを押すとトップページに遷移する
☆マイページに遷移するときは'人'のアイコンを使用（文字だけだと味気ないと思ったので😊）
☆ログインしている、していないで新規登録、ログイン、ログアウトのボタンが表示されるようにした


この記事が気に入ったらサポートをしてみませんか？