How to conditionally render a navigation bar in Ruby
Tags: ruby, css, webdev, javascript
Published: 2020-05-29 00:32:52

# 
### 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

```html
# 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:

![Logged out](https://dev-to-uploads.s3.amazonaws.com/i/og8k1v9pphpg2d9umzjw.png)

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

```ruby 
# 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 

```ruby
# 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

```html
# 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:

![Logged in](https://dev-to-uploads.s3.amazonaws.com/i/9wxcg87yah2lapf8eq69.png)

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](https://github.com/TerryThreatt/investy). Feel free to leave comments or suggestions about navigation bars. 

Terry Threatt