<div class="fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 transition-transform duration-300 ease-in-out -translate-x-full lg:translate-x-0"
     data-sidebar-target="sidebar">
  
  <!-- Sidebar Header with Logo -->
  <div class="flex h-16 items-center justify-between px-4 border-b border-neutral-700">
    <div class="flex items-center">
      <%= image_tag("logomark.png", class: "w-8 h-8", alt: "Concerto") %>
      <span class="ml-3 text-white font-semibold text-lg">Concerto</span>
    </div>
    <button type="button" 
            class="lg:hidden text-neutral-300 hover:text-white p-1 rounded-md"
            data-action="sidebar#toggle"
            aria-label="Close sidebar">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Navigation -->
  <nav class="flex-1 px-3 py-4 space-y-6">
    
    <!-- Content Section -->
    <div>
      <h3 class="px-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2">
        Content
      </h3>
      <div class="space-y-1">
        <%= sidebar_nav_link_to "Dashboard", "/", "home" %>
        <%= sidebar_nav_link_to "Add Content", new_content_path, "plus" %>
        <%= sidebar_nav_link_to "Browse Content", contents_path, "collection" %>
        <% if policy(Submission).pending? %>
          <%= sidebar_nav_link_to_with_badge "Moderation", submissions_path, "clipboard-document-check", pending_moderation_count %>
        <% end %>
      </div>
    </div>

    <!-- Network Section -->
    <div>
      <h3 class="px-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2">
        Network
      </h3>
      <div class="space-y-1">
        <%= sidebar_nav_link_to "Feeds", feeds_path, "rss" %>
        <%= sidebar_nav_link_to "Screens", screens_path, "desktop-computer" %>
      </div>
    </div>

    <!-- Administration Section -->
    <% if user_signed_in? %>
    <div>
      <h3 class="px-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2">
        Administration
      </h3>
      <div class="space-y-1">
        <%= sidebar_nav_link_to "Groups", groups_path, "users" %>
        <%= sidebar_nav_link_to "Templates", templates_path, "template" %>
        <% if policy(Setting).index? %>
          <%= sidebar_nav_link_to "Settings", admin_settings_path, "cog" %>
        <% end %>
        <%= sidebar_nav_link_to "Users", users_path, "user" %>
        <%= sidebar_nav_link_to "System", "#", "server" %>
      </div>
    </div>
    <% end %>

  </nav>

</div>

<!-- Mobile overlay -->
<div class="fixed inset-0 bg-neutral-900/50 z-40 lg:hidden"
     data-sidebar-target="overlay"
     data-action="click->sidebar#close"
     style="display: none;"></div>