Packages

attached_dashboard

0.2.1
0.2.2 0.2.1 0.2.0 0.1.0

Phoenix LiveView dashboard for the attached file-attachment library.

HexDocs

Current section

Files

Jump to
Readme
4 Versions
8 Dependencies
Dependants
Files
Activity
attached_dashboard lib attached_dashboard web components layouts dashboard.html.heex
Raw

lib/attached_dashboard/web/components/layouts/dashboard.html.heex 

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