<div class="sticky top-0 z-50 flex flex-row bg-white justify-between py-1 border-b border-gray-200">
  <div class="flex flex-col md:flex-row">
    <section class="flex flex-row gap-x-2 px-2">
      <.link navigate={~p"/"} class="font-bold group">
        💜 <span class="group-hover:underline">sloanelybutsurely.com</span>
      </.link>
    </section>
    <section :if={not is_nil(@current_user)} class="ml-2">
      <nav>
        <ul class="flex flex-row gap-x-2">
          <li><.link navigate={~p"/admin/writing"}>admin</.link></li>
        </ul>
      </nav>
    </section>
  </div>

  <%= if is_nil(@current_user) do %>
    <.link class="px-2 text-transparent hover:text-current" href={~p"/admin/users/log_in"}>
      sign in
    </.link>
  <% else %>
    <.link class="px-2" href={~p"/admin/users/log_out"} method="delete">sign out</.link>
  <% end %>
</div>

<main class="mx-auto">
  {@inner_content}
</main>