<div class="nav-wrap">
  <nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">TaskMate</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
      <% if user_signed_in? %>
        <li><a href="#">Tasks</a></li>
        <li><a href="#">Group</a></li>
        <li><a href="#">///</a></li>
        <li><a href="#">Log Out</a></li>
      <% else %>
        <li><a href="#">Log In</a></li>
      <% end %>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <% if user_signed_in? %>
          <li><a href="#">Tasks</a></li>
          <li><a href="#">Group</a></li>
          <li><a href="#">Stuff</a></li>
          <li><a href="#">Log Out</a></li>
        <% else %>
          <li><a href="#">Log In</a></li>
        <% end %>
      </ul>
    </div>
  </nav>
</div>
<div class="nav-wrap">
  <nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">TaskMate</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></a>
      <ul class="right hide-on-med-and-down">
      <% if user_signed_in? %>
        <li><a href="#">Tasks</a></li>
        <li><a href="#">Group</a></li>
        <li><a href="#">///</a></li>
        <li><a href="#">Log Out</a></li>
      <% else %>
        <li><a href="#">Log In</a></li>
      <% end %>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <% if user_signed_in? %>
          <li><a href="#">Tasks</a></li>
          <li><a href="#">Group</a></li>
          <li><a href="#">Stuff</a></li>
          <li><a href="#">Log Out</a></li>
        <% else %>
          <li><a href="#">Log In</a></li>
        <% end %>
      </ul>
    </div>
  </nav>
</div>
Add icon as menu bar when mobile
Add icon as menu bar when mobile
