<header class=“w-full shadow bg-gray-50 text-base”>

<nav aria-label="Main" class="flex items-center justify-between flex-wrap px-6 py-4" role="navigation">
  <div class="flex items-center flex-no-shrink text-gray-700 mr-6">
    <%%= link_to '<%= app_name %>', '/', class: 'font-semibold text-xl cursor-pointer hover:underline' %>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="lg:flex-grow">
      <%%= link_to 'Home', '/', class: 'block mt-0 lg:inline-block text-gray-400 hover:text-gray-500 cursor-pointer mr-4' %>
      <%%= link_to 'Features', '#', class: 'block mt-0 lg:inline-block text-gray-400 hover:text-gray-500 cursor-pointer mr-4' %>
      <%%= link_to 'Pricing', '#', class: 'block mt-0 lg:inline-block text-gray-400 hover:text-gray-500 cursor-pointer mr-4' %>
      <%%= link_to 'Disabled', '#', class: 'block mt-0 lg:inline-block text-gray-300 cursor-default mr-4' %>
    </div>
  </div>
  <div class="block lg:inline-block leading-none lg:pl-20 mt-3 lg:mt-0">

<%- if options -%>

<%%- if user_signed_in? %>
  <div class="flex items-center justify-between flex-wrap flex-grow flex-col lg:flex-row w-100">
    <%%= link_to destroy_user_session_path, method: :delete, class: 'block lg:inline-block w-full lg:w-auto text-gray-400 hover:text-gray-500 py-2 lg:py-0' do %>
      Logout <i class="fas fa-sign-out-alt mr-1 ml-2"></i>
    <%% end %>
  </div>
<%% else %>
  <%%= link_to 'Login', new_user_session_path %>
<%% end %>

<%- else -%>

<div class="flex items-center justify-between flex-wrap flex-grow flex-col lg:flex-row w-100">
  <%%= link_to 'Help', '#', class: 'block lg:inline-block lg:mr-10 w-full lg:w-auto text-gray-400 hover:text-gray-500 py-2 lg:py-0' %>
</div>

<%- end -%>

  </div>
</nav>

</header>