<div class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"></a>
    </div>
    <nav id="navbar" class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-flash"></span> Style Guide <b class="caret"></b></a>
          <ul class="dropdown-menu products">
            <li>
              <ul class="unstyled inline">
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
              </ul>
              <ul class="unstyled inline">
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <h6>Product Name</h6>
                    <p>Short description here</p>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= user.email unless user.nil? %> <b class="caret"></b></a>
          <ul class="dropdown-menu inline profile">
            <li>
              <% unless user.nil? %>
              <div class="profile-image"><%= image_tag "https://secure.gravatar.com/avatar/#{Digest::MD5.hexdigest(user.email)}.png?s=20", class: "gravatar" %></div>
              <h5><%= user.name %></h5>
              <p><%= user.email %><br>Logged in as: <%= user.kind %></p>
              <% end %>
            </li>
            <li>
              <%= button_to "#", html_options = {class: "btn btn-default" } do %>
              <span class="glyphicon glyphicon-th-list"></span>Logout
              <% end %>
              <button href="#" class="btn btn-default"><span class="glyphicon glyphicon-th-list"></span>Settings</button>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>