<div class="md:flex md:items-start md:justify-between">
  <div class="flex items-center">
    <a href="/">
      <%= image_tag 'bram.jpg', alt: "Bram Jetten", class: 'rounded-lg w-16 md:w-20 mr-4 md:mr-8' %>
    </a>
    
    <div class="">
      <%= link_to '/', class: 'text-2xl md:text-3xl block tracking-tight font-extrabold text-gray-700' do %>
        Bram Jetten
      <% end %>
      
      <nav class="md:mt-1">
        <ul class="flex -ml-3">
          <% nav_items.each do |nav_item| %>
            <li>
              <%= link_to nav_item.menu_title, nav_item.materialized_path, class: "px-3 block font-medium hover:text-gray-900 #{(current_page.materialized_path.starts_with? nav_item.materialized_path) ? 'text-gray-900' : 'text-gray-400'}" %>
            </li>
          <% end %>
        </ul>
      </nav>
    </div>
  </div>
  
  <div class="flex md:space-x-3 justify-center absolute md:relative top-4 right-2 md:inset-auto">
    <%= link_to 'https://www.spinacms.com', class: 'items-center p-2 md:p-3 text-gray-400 hover:text-gray-700 flex', target: :blank do %>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" class="w-5 h-5 md:mr-2">
        <g fill="none" fill-rule="evenodd"><path fill="#685D98" d="M0 8l16 16V8z"/><path fill="#6B649C" d="M32 8L16 24V8z"/><path fill="#8980B2" d="M8 8l8 16 8-16z"/><path fill="#8278B1" d="M27 0v8H5V0z"/><path fill="#A9A4CB" d="M8 8l8-8 8 8z"/><path fill="#7668A6" d="M5 0L0 8h8z"/><path fill="#8980B2" d="M27 0l5 8h-8z"/></g>
      </svg>
  
      <span class="text-sm font-medium hidden md:block">Spina CMS</span>
    <% end %>
    
    <%= link_to 'https://twitter.com/BramJetten', class: 'flex items-center p-2 md:p-3 text-gray-400 hover:text-blue-400', target: :blank do %>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-blue-400 md:mr-2" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
      <span class="text-sm font-medium hidden md:block">@BramJetten</span>
    <% end %>
  </div>
</div>