How to conditionally render a navigation bar in Ruby

Introduction

Rending a navigation bar in a web application is a pretty useful pattern to get to important parts of the application but how to prevent access to those important parts if they aren't logged in? I will show you how I was able to conditionally render a navigation bar.

In a Sinatra web application project for Flatiron School, I was able to save time building an investment logging application by creating a navigation bar that conditionally renders based on whether a user is logged into my application. I will walk you through a few code snippets to show you how I implemented this navigation bar in the project.

Prerequisites

I used the following to get started:

• ERB - Embedded Ruby
• Bootstrap - A CSS framework

Step 1 - Create Navigation

# app/views/layout.erb 

        <ul class="nav nav-pills justify-content-end">
          <li class="nav-item">
            <a class="nav-link p-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link p-link" href="/investments">Investments</a>
          </li>
          <li class="nav-item">
              <a class="nav-link p-link" href="/login">Log in</a>
          </li>
        </ul>

Here is my navigation before using conditional rendering:

I produced a navigation bar in the layout.erb file in the app/views/ folder of my project using the CSS framework Bootstrap. Visible on the Welcome page is a navigation bar produced by the code from my layout.erb file.

Notice the following links in my navigation bar to the right:

• Home
• Sign up
• Log in

Step 2 - Create helper functions

# app/controllers/application_controller.rb
... 
def is_logged_in?
      !!session[:user_id]
    end

    def current_user
      @current_user ||= User.find(session[:user_id]) if is_logged_in?
    end
...

Here I made some useful helper functions in Ruby to find out if a user is logged in and who the current user is. I know that I can repurpose these functions to conditionally render links in my navigation bar.

Step 3 - Create conditions based on a logged-in user

# app/views/layout.erb   
...
<li class="nav-item">
            <% if !is_logged_in? %><a class="nav-link p-link" href="/signup">Sign up</a><% end %>
          </li>    
...

I used the Ruby templating system ERB to produce these scripting tags that will render my navigation to my homepage view. I am using my helper function is_logged_in? with the conditional keyword if and the logical not operator identified by the symbol ! to find out if a user is not logged in.

This logic can be used throughout my navigation bar to check the condition of the user and show more links if the user is logged in.

Step 4 - Create more conditions in the navigation bar

# app/views/layout.erb 

...
        <ul class="nav nav-pills justify-content-end">
          <li class="nav-item">
            <a class="nav-link p-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <% if current_user %><a class="nav-link p-link" href="/investments">Investments</a><% end %>
          </li>
          <li class="nav-item">
            <% if !is_logged_in? %><a class="nav-link p-link" href="/signup">Sign up</a><% end %>
          </li>
          <li class="nav-item">
            <% if current_user %><a class="nav-link p-link" href="/account">Account</a><% end %>
          </li>
          <li class="nav-item">
            <% if !is_logged_in? %>
              <a class="nav-link p-link" href="/login">Log in</a>
              <% else %>
              <a class="nav-link p-link" href="/logout">Log out</a>
            <% end %>
          </li>
        </ul>
...

Here is my navigation after using conditional rendering:

After logging into my app, I am now able to view more navigation links:

• Home
• Investments
• Account
• Log out

Conclusion

Using the templating system ERB and some conditional logic keywords in Ruby, we were able to create a useful navigation bar in my layout that can be used in each view of my application. This navigation can give more access to links in my application if a valid user is logged in. Here is the link to the full project repository. Feel free to leave comments or suggestions about navigation bars.

Terry Threatt