<nav class="flex items-center justify-between flex-wrap bg-grey-dark p-6 w-full z-10 bg-gray-800"> <div class="flex items-center flex-no-shrink text-white mr-6"> <a class="text-white no-underline hover:text-white hover:no-underline" href="/"> <span class="text-2xl pl-2"><i class="em em-grinning"></i> <%= I18n.t! "en", "site.title" %></span> </a> </div> <div class="block lg:hidden"> <button id="nav-toggle" class="flex items-center px-4 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> </div> <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content"> <ul class="list-reset lg:flex justify-end flex-1 items-center"> <%= if has_role?(@conn, :admin) do %> <li class="mr-3"> <a class="inline-block py-2 px-4 text-white no-underline" href="/admin">Admin</a> </li> <% end %> <%= if Pow.Plug.current_user(@conn) do %> <li class="mr-3"> <%= link "Sign Out", to: Routes.pow_session_path(@conn, :delete), method: :delete, class: "inline-block text-white no-underline hover:text-white hover:text-underline py-2 px-4" %> </li> <% else %> <% end %> </ul> </div> </nav>