Using partials

Internal navigation bar

At this point, our Posts Index page looks like this:

And the New Post page looks like this:

What if we want to add the navigation bar here as well? Should we copy and paste all the code?

Fortunately, no.

One of the core principles of Rails is DRY - Don't Repeat Yourself. Rails has several mechanisms to help us not repeat ourselves. One of them is called partials.

Simply put, partials are small pieces of HTML (or ERB) code that can be included at any place in our code. Let's create a partial for the navbar and then use it on other pages.

Create a new directory under app/views called shared. (The name of the directory is not very important, as long as we're consistent with the way we refer to it).

In this directory, create a file called _internal_navbar.html.erb. The underscore is important, it will tell Rails that this is not a regular view, but a partial one.

I am also using internal to distinguish the navbar displayed on the pages seen by authenticated and non-authenticated users, to anticipate future problems.

Now go to the file app/views/posts/index.html.erb, take the first part (starting from <nav class="navbar navbar-default">, ending at </nav>) cut it and paste it into the newly created app/views/shared/_internal_navbar.html.erb:

We have just created a partial. Next, we need to tell our view to use this partial instead of the old code. Open app/views/posts/index.html.erb and add the following at its top:

<%= render "shared/internal_navbar" %>

This will tell Rails to render the newly created partial (that stays in shared/_internal_navbar).

When we save the file, and refresh the Post Index browser page, it looks just like before. Except now we have reusable code we can insert in other views, too. Open the app/views/posts/new.html.erb file and add at the top of the file:

<%= render "shared/internal_navbar" %>

Save the file and go to the New Post page. You will see the navbar:

Do the same for the app/views/posts/edit.html.erb file. If you want to have the navbar on other internal pages we will create, don't forget to add the <%= render "shared/internal_navbar" %> line of code at the top.

One more thing, though. When you are on the New Post page and try to follow the "Marine life" link, you will get nothing. If you look at the code in the views/shared/_internal_navbar.html.erb partial, you will see:

<div class="navbar-header">
  <a class="navbar-brand" href="#">Marine Life</a>
</div>

We would like this link to take us to the root path instead (that we defined to be the Posts Index page), so we will use the link_to helper. Change the code above to:

<div class="navbar-header">
  <%=link_to("Marine Life", root_path, class: "navbar-brand") %>
</div>

External navigation bar

Let's do the same thing for the external pages - those seen by the users who are not authenticated on the platform.

Create a new file, views/shared/_external_navbar.html.erb.

and add the following code there:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <%=link_to("Marine Life", root_path, class: "navbar-brand") %>
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to("Register now", new_user_registration_path) %>
        </li>
        <li>
          <%= link_to("Sign in", new_user_session_path) %>
        </li>
      </ul>
    </div>
  </div>
</nav>

In the views/devise/registrations/new.html.erb and views/devise/sessions/new.html.erb files, add the following line:

<%= render "shared/external_navbar" %>

Save the files and refresh the corresponding pages to check the addition of the navbar.