berrypod/lib/berrypod_web/components/layouts/admin.html.heex

<div class="admin-layout h-full">
  <input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />

  <%!-- main content area --%>
  <div class="admin-layout-content">
    <%!-- mobile header --%>
    <header class="admin-topbar">
      <label
        for="admin-drawer"
        class="admin-btn admin-btn-ghost admin-btn-icon"
        aria-label="Open navigation"
      >
        <.icon name="hero-bars-3" class="size-5" />
      </label>
      <span class="admin-topbar-title">Berrypod</span>
      <.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm">
        <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
      </.link>
    </header>

    <%!-- email warning banner --%>
    <div :if={!@email_configured} class="admin-banner-warning">
      <.icon name="hero-exclamation-triangle" class="size-5 shrink-0" />
      <p>
        Email delivery isn't set up yet — customers won't receive order confirmations or shipping updates.
        <.link navigate={~p"/admin/settings/email"} class="underline font-medium">
          Configure email
        </.link>
      </p>
    </div>

    <%!-- page content --%>
    <main class="flex-1 p-4 sm:p-6 lg:p-8">
      <div class="mx-auto max-w-5xl">
        {@inner_content}
      </div>
    </main>
  </div>

  <%!-- sidebar --%>
  <div class="admin-sidebar-wrapper">
    <label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
    <aside class="admin-sidebar">
      <%!-- sidebar header --%>
      <div class="p-4 border-b border-base-300">
        <.link navigate={~p"/admin"} class="text-lg font-bold tracking-tight">
          Berrypod
        </.link>
        <p class="text-xs text-base-content/60 mt-0.5 truncate">
          {@current_scope.user.email}
        </p>
      </div>

      <%!-- nav links --%>
      <nav class="flex-1 p-2" aria-label="Admin navigation">
        <div class="admin-nav-group">
          <span class="admin-nav-heading">Shop</span>
          <ul class="admin-nav">
            <li>
              <.link
                navigate={~p"/admin"}
                class={admin_nav_active?(@current_path, "/admin")}
              >
                <.icon name="hero-home" class="size-5" /> Dashboard
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/analytics"}
                class={admin_nav_active?(@current_path, "/admin/analytics")}
              >
                <.icon name="hero-chart-bar" class="size-5" /> Analytics
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/orders"}
                class={admin_nav_active?(@current_path, "/admin/orders")}
              >
                <.icon name="hero-shopping-bag" class="size-5" /> Orders
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/products"}
                class={admin_nav_active?(@current_path, "/admin/products")}
              >
                <.icon name="hero-cube" class="size-5" /> Products
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/providers"}
                class={admin_nav_active?(@current_path, "/admin/providers")}
              >
                <.icon name="hero-link" class="size-5" /> Print providers
              </.link>
            </li>
          </ul>
        </div>

        <div class="admin-nav-group">
          <span class="admin-nav-heading">Content</span>
          <ul class="admin-nav">
            <li>
              <.link
                navigate={~p"/admin/pages"}
                class={admin_nav_active?(@current_path, "/admin/pages")}
              >
                <.icon name="hero-document" class="size-5" /> Pages
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/navigation"}
                class={admin_nav_active?(@current_path, "/admin/navigation")}
              >
                <.icon name="hero-bars-3" class="size-5" /> Navigation
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/media"}
                class={admin_nav_active?(@current_path, "/admin/media")}
              >
                <.icon name="hero-photo" class="size-5" /> Media
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/newsletter"}
                class={admin_nav_active?(@current_path, "/admin/newsletter")}
              >
                <.icon name="hero-megaphone" class="size-5" /> Newsletter
              </.link>
            </li>
            <li>
              <.link
                href={~p"/admin/theme"}
                class={admin_nav_active?(@current_path, "/admin/theme")}
              >
                <.icon name="hero-paint-brush" class="size-5" /> Theme
              </.link>
            </li>
          </ul>
        </div>

        <div class="admin-nav-group">
          <span class="admin-nav-heading">Settings</span>
          <ul class="admin-nav">
            <li>
              <.link
                navigate={~p"/admin/settings"}
                class={admin_nav_active?(@current_path, "/admin/settings")}
              >
                <.icon name="hero-cog-6-tooth" class="size-5" /> Settings
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/settings/email"}
                class={admin_nav_active?(@current_path, "/admin/settings/email")}
              >
                <.icon name="hero-envelope" class="size-5" /> Email
              </.link>
            </li>
            <li>
              <.link
                navigate={~p"/admin/redirects"}
                class={admin_nav_active?(@current_path, "/admin/redirects")}
              >
                <.icon name="hero-arrow-uturn-right" class="size-5" /> Redirects
              </.link>
            </li>
          </ul>
        </div>
      </nav>

      <%!-- sidebar footer --%>
      <div class="p-2 border-t border-base-300">
        <ul class="admin-nav">
          <li>
            <.link href={~p"/"}>
              <.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop
            </.link>
          </li>
          <li>
            <.link href={~p"/admin/dashboard"}>
              <.icon name="hero-chart-bar" class="size-5" /> LiveDashboard
            </.link>
          </li>
          <li>
            <.link href={~p"/admin/errors"}>
              <.icon name="hero-bug-ant" class="size-5" /> Errors
            </.link>
          </li>
          <li>
            <.link href={~p"/users/log-out"} method="delete">
              <.icon name="hero-arrow-right-start-on-rectangle" class="size-5" /> Log out
            </.link>
          </li>
        </ul>
      </div>
    </aside>
  </div>
</div>

<.flash_group flash={@flash} />