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

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

headerchange.gif

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".

(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!

Recommended Posts

How to switch the display of the header menu for each transition page
[Rails] How to change the page title of the browser for each page
How to display the amount of disk used by Docker container for each container
How to display the result of form input
[Java] How to get the URL of the transition source
[Ruby] How to find the sum of each digit
How to display the select field of time_select every 30 minutes
[Rails] How to display the list of posts by category
To switch JVM for each project
[Rails] How to get the URL of the transition source and redirect
How to display 0 on the left side of the standard input value
How to get the contents of Map using for statement Memorandum
[Rails] How to omit the display of the character string of the link_to method
How to check for the contents of a java fixed-length string
How to sort the List of SelectItem
I want to display the number of orders for today using datetime.
[Swing] How to display an arbitrary name on the menu bar on Mac
How to constrain the action of the transition destination when not logged in
How to find the cause of the Ruby error
[Rails] Button to return to the top of the page
Customize how to divide the contents of Recyclerview
How to display a web page in Java
How to get today's day of the week
[For beginners] How to implement the delete function
[Ruby] Code to display the day of the week
[Java] (for MacOS) How to set the classpath
[Java] How to get the authority of the folder
How to specify index of JavaScript for statement
[Must-see for beginners] I changed the display of the posting time to Japanese time [l method]
[rails devise] How to transition users who are not logged in to the login page
[Java] How to display the day of the week acquired by LocalDate, DateTimeformatter in Japanese
[Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap
How to delete / update the list field of OneToMany
How to set the display time to Japan time in Rails
How to write Scala from the perspective of Java
[Rails, JS] How to implement asynchronous display of comments
How to install the root certificate of Centos7 (Cybertrust)
[Java] How to get the maximum value of HashMap
I want to display the name of the poster of the comment
[Rails] How to change the column name of the table
[SwiftUI] How to specify the abbreviated position of Text
[Android] How to get the setting language of the terminal
[Rails] How to get the contents of strong parameters
How to judge the click of any area of the image
How to download the old version of Apache Tomcat
How to make a mod for Slay the Spire
How to loop Java Map (for Each / extended for statement)
[Swift] How to get the document ID of Firebase
How to execute WebCamCapture sample of NyARToolkit for Java
[Rails] How to display an image in the view
How to study kotlin for the first time ~ Part 2 ~
How to study kotlin for the first time ~ Part 1 ~
How to manage the difference in each environment with yml without increasing the number of RAILS_ENV
[SwiftUI] I tried to find out how it changes for each specified location of background
How to transition from the [Swift5] app to the iPhone settings screen
[Swift 5] Recognize ON/OFF of Switch in custom cell for each cell
SDWebImage: How to clear the cache for a particular UIImageView
Transition using the header image of CardView as it is
How to get the longest information from Twitter as of 12/12/2016
The idea of C # (lambda expression, for statement) to chew
How to change the setting value of Springboot Hikari CP