Quick tip 2 - Adding a navbar

Right now, this is what we have on the main page displaying the cases:

The Create a new case and Logout links look like they need more work. The Bootstrap component that can handle this is the navbar.

The documentation is rather verbose about all the possibilities, so we will select only what we need, namely:

<nav class="navbar navbar-default">  
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          Link
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          Link
        </li>
      </ul>
    </div>
  </div>
</nav>

Now we will substitute Brand with the name of the application and each Link with the Create a new case and Logout links, as follows:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Case management system</a>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <%=link_to("Create a new case", new_case_path) %>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>
        </li>
      </ul>
    </div>
  </div>
</nav>

Finally, this is what we get:

You can notice that the navbar component is fairly smart and can adapt to different screen sizes, looking good even on mobile. This is great! In the next tips, we will learn how to do this on the other views for the application content.