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

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

  <%!-- 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>

    <.flash_group flash={@flash} />

    <%!-- page content --%>
    <main class="admin-main">
      <div class="admin-container">
        {@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">
      <%!-- nav links --%>
      <nav class="admin-sidebar-nav" 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/activity"}
                class={admin_nav_active?(@current_path, "/admin/activity")}
              >
                <.icon name="hero-bell" class="size-5" /> Activity
                <span
                  :if={@attention_count > 0}
                  class="admin-badge admin-badge-sm admin-badge-warning ml-auto"
                >
                  {@attention_count}
                </span>
              </.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="admin-sidebar-footer">
        <ul class="admin-nav">
          <li class="admin-sidebar-email truncate">
            <.icon name="hero-user" class="size-5" /> {@current_scope.user.email}
          </li>
          <li>
            <details class="admin-dev-tools">
              <summary>
                <.icon name="hero-wrench-screwdriver" class="size-5" /> Developer tools
                <.icon name="hero-chevron-right" class="size-4 admin-dev-tools-chevron" />
              </summary>
              <ul class="admin-nav">
                <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"/admin/oban"}>
                    <.icon name="hero-queue-list" class="size-5" /> Jobs
                  </.link>
                </li>
              </ul>
            </details>
          </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>