<div class="h-screen overflow-hidden flex bg-base-200">
  <%!-- Mobile backdrop --%>
  <div
    id="sidebar-backdrop"
    class="fixed inset-0 z-30 bg-black/50 hidden sm:hidden"
    phx-click={
      Phoenix.LiveView.JS.hide(to: "#sidebar-backdrop")
      |> Phoenix.LiveView.JS.add_class("-translate-x-full", to: "#sidebar")
    }
  />

  <%!-- Sidebar --%>
  <div
    id="sidebar"
    class="-translate-x-full sm:translate-x-0 fixed sm:static inset-y-0 left-0 z-40 transition-transform duration-200 sm:transition-none p-3"
  >
    <Sidebar.dashboard prefix={@prefix} page_meta={@page_meta} backlink={@backlink} />
  </div>

  <%!-- Main content --%>
  <div class="flex-1 flex flex-col overflow-hidden">
    <%!-- Mobile top bar --%>
    <div class="sm:hidden flex items-center gap-3 px-4 py-3 bg-base-100 border-b border-base-300">
      <button
        phx-click={
          Phoenix.LiveView.JS.show(to: "#sidebar-backdrop")
          |> Phoenix.LiveView.JS.remove_class("-translate-x-full", to: "#sidebar")
        }
        class="p-1.5 rounded hover:bg-base-200 text-base-content/60"
        aria-label="Open menu"
      >
        <svg
          class="w-5 h-5"
          aria-hidden="true"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.5"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
      </button>
      <span class="text-sm font-bold text-primary tracking-tight">Attached Dashboard</span>
    </div>

    <main class="flex-1 overflow-auto pt-3 px-4 sm:px-8 pb-8">
      {render_slot(@inner_block)}
    </main>
  </div>
</div>
