Introduction

This is a workaround when you want to switch the contents of the header menu for each page. (For example, I want to display the menus of A, B, and C on the home screen, and the menu of D on the new posting screen, etc.)

Complete image

environment

MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0

Let's work!

As a flow, (1) Divide the header into "Home screen header" and "New post screen header" to create a partial template. (2) Conditionally branch according to the request path and switch the display contents. It will be.

This time, we will change the menu contents displayed in the header when logging in.

① Create partial templates for "Home screen header" and "New post screen header"

①-1 First, create a header for the home screen. Create "_root_header.html.erb" in the views / layout directory.

`erb:_root_header.html.erb`


<div class="headerMenus">
  <div class="headerMenus__left">
    <%= link_to image_tag("myTown4.jpg ", class: "headerLogo"), "/" %>
    <% if user_signed_in? %>
      <div class="loginedMenus">
        <a href="#0", class="loginMenu">Top</a>
        <a href="#1", class="loginMenu">Category</a>
        <a href="#2", class="loginMenu">Prefecture</a>
        <a href="#3", class="loginMenu">New Posts</a>
      </div>
    <% else %>
      <div class="beforeLoginMenus">
        <%= link_to "Guest login", users_guest_sign_in_path, method: :post, class: 'beforeLoginMenu' %>
        <%= link_to "Login", new_user_session_path, class: 'beforeLoginMenu' %>
        <%= link_to "sign up", new_user_registration_path, class: 'beforeLoginMenu' %>
      </div>
    <% end %>
  </div>
  //Partially omitted//
</div>

And create. By the way, when you log in, you will see four menus, "Top, Category, Prefecture, New Posts".

##### ①-2 Create a partial template for the "header for new posting screen". Create "_header.html.erb" in the views / layout directory.

`erb:_header.html.erb`


<div class="headerMenus">
  <div class="headerMenus__left">
    <%= link_to image_tag("myTown4.jpg ", class: "headerLogo"), "/" %>
    <% if user_signed_in? %>
      <div class="loginedMenus">
        <%= link_to "Top Page", root_path, class:"loginMenu" %>
      </div>
    <% else %>
      <div class="beforeLoginMenus">
        <%= link_to "Guest login", users_guest_sign_in_path, method: :post, class: 'beforeLoginMenu' %>
        <%= link_to "Login", new_user_session_path, class: 'beforeLoginMenu' %>
        <%= link_to "sign up", new_user_registration_path, class: 'beforeLoginMenu' %>
      </div>
    <% end %>
  </div>
  //Partially omitted//
</div>

When you log in, you will see a menu called "Top Page".

The description in the header will be different for each person, so please rewrite it to your own description.

(2) Conditionally branch according to the request path and switch the display contents.

In application.html.erb in views / layouts, describe the conditional branching according to the request path (path to the home screen or path of other screens).

`erb:application.html.erb`


//Partially omitted//
<body>
  <header class="header">
    <%#Change the header display on the top page and other pages%>
    <% if request.path == '/' %>
      <%= render partial: "layouts/root_header" %>
    <% else %>
      <%= render partial: "layouts/header" %>
    <% end %>
  </header>
  //Partially omitted//
</body>

There is a description <% if request.path =='/'%>, which means "when the request path is'/' (root)". In this case, the root path is set on the home screen.

If the condition is true (the root path) <%= render partial: "layouts/root_header" %> Call _root_header.html.erb with.
If false (other than the root path) <%= render partial: "layouts/header" %> Call header.html.erb with.

that's all.

Finally

I wonder if there is another better way. If anyone has a better way, I would appreciate it if you could tell me. Thank you!

How to switch the display of the header menu for each transition page