<% if current_user %>
  <aside data-sidebar-target="sidebar" style="left: -100%;" class="flex flex-col overflow-hidden z-30 top-0 bottom-0 absolute sm:static w-96 sm:w-1/4 sm:min-w-[250px] bg-gray-800 transition-all drop-shadow-lg overflow-y-auto">
    <%= yield :sidebar_prepend %>
    <div class="flex-1 p-3 space-y-2 w-full">
      <div class="flex gap-3 sm:gap-4 w-full">
        <%= form_for :search, url: "/conversations/search", class: "relative w-full" do |f| %>
          <input type="text" placeholder="<%= it("Search...") %>" name="q" class="rounded-md bg-gray-400 focus:bg-gray-200 text-gray-800 p-1 pl-2 w-full">
          <div class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-800"><%= heroicon "magnifying-glass" %></div>
        <% end %>
        <%#= link_to it("New"), new_conversation_path, class:"bg-magma-red-400 text-gray-100 hover:scale-105 py-1 px-2 rounded", title: "New conversation" %>
      </div>
      <div class="latest-conversations flex flex-col gap-2">
        <%= render collection: @latest_conversations, partial: "conversations/latest", as: :conversation %>
      </div>
    </div>
  </aside>
<% end %>

<div data-sidebar-target="sidebaroverlay" data-action="click->sidebar#hide" class="hidden sm:hidden fixed inset-0 bg-gray-500/80"> </div>
