Hide the Navigation Bar in Rails

Written by leonard-kanyesigye | Published 2020/04/17
Tech Story Tags: ruby-on-rails | rails | erb | bootstrap | html | web-development | front-end-development | coding

TLDR Recently I was working on a project in RoR and I realized I wanted to show the navigation bar and footer on some pages and nothing on others. This article assumes you already have an application running, and already have a sign-up page designed. The next step is to make sure we make the navbar disappear on signup and signing pages, but show up on other pages. There are various ways to do this but in this article, I highlight just 2 that worked for me.via the TL;DR App

Recently I was working on a project in RoR and I realized I wanted to show the navigation bar and footer on some pages and nothing on others. For example, Imagine a signup page with a navbar !!! Yuck, not only does it not look pretty but also, I have never seen any design where the login/logout pages have a navigation bar. Very few designs like that do exist, and in my opinion, are not the best.
This article assumes you already have an application running, and already have a sign-up page designed.
I set up my application, designed the navbar and footer partials stored under the views/shared folder. I did not want to render the partials on every page that I created, so I placed the partials in the
application.html.erb 
file as shown in Figure 1.
Figure 1. Navbar and footer partial placed in the application.html.erb
The following piece of code shown in figure 1 produces something like this
Figure 2: Screenshot showing sign up page before the navigation bar was hidden
It doesn't look pretty, right?
The next step is to make sure we make the navbar disappear on the signup and signing pages, but show up on other pages.
There are various ways to do this but in this article, I highlight just 2 that worked for me.
1. Using action_name
Figure 3: Using action_name
By using action_name, we specify which methods we want to execute. We can specify as many as we want using the || operator. In this particular, we specify that for every action named “
new
” and “
edit
” in every controller, we should exclude showing the navbar.
This works fine, except that it covers the entire application. Meaning even if you create a contact us form, later on, it shall render without a navbar. This did not work for me as my application has quite a number of controllers and they all have new methods. Besides, I felt there was a better way to do this hence arriving at option 2.
2. Using the current_page?
Figure 4: Using current_page?
This takes the parameter of the path of the desired page. I found this the best solution for me as it gave me exactly what I wanted to achieve as shown in Figure 5
Figure 5: Screenshot showing navigation hidden
I do acknowledge there other ways of achieving this, in case you want other options, look into using
  • Using the content_for
  • Using the before_filter
  • Or creating different layouts and rendering them conditionally depending on what you want.
In case you know of better ways to achieve this, please let me know in the comments.
Previously published at https://medium.com/@leonard.kanyesigye/hide-the-navigation-bar-in-rails-590b77f66e71

Published by HackerNoon on 2020/04/17