Claudio Ortolina
f4727bdcbd
Use a combination of ghost and soft, with button groups where appropriate. Also remove unnecessary negative margins, and pad around for ease of use on mobile.
144 lines
4.9 KiB
Plaintext
144 lines
4.9 KiB
Plaintext
<%!-- TODO: replace with OSS version --%>
|
|
<nav class="border-b border-slate-900/10 dark:border-slate-300/10" aria-label="Sections">
|
|
<div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 2xl:px-0">
|
|
<div class="flex h-16 justify-between">
|
|
<div class="flex">
|
|
<div class="flex space-x-2 md:space-x-4">
|
|
<.nav_link route={~p"/"} section={:stats} current_section={@current_section}>
|
|
<.icon
|
|
name="hero-chart-pie"
|
|
class="max-sm:hidden h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Stats")}
|
|
</.nav_link>
|
|
<.nav_link
|
|
route={~p"/collection"}
|
|
section={:collection}
|
|
current_section={@current_section}
|
|
>
|
|
<.icon
|
|
name="hero-circle-stack"
|
|
class="max-sm:hidden h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Collection")}
|
|
</.nav_link>
|
|
<.nav_link route={~p"/wishlist"} section={:wishlist} current_section={@current_section}>
|
|
<.icon
|
|
name="hero-star"
|
|
class="max-sm:hidden h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Wishlist")}
|
|
</.nav_link>
|
|
<.nav_link route={~p"/scrobble"} section={:scrobble} current_section={@current_section}>
|
|
<.icon
|
|
name="hero-play"
|
|
class="max-sm:hidden h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Scrobble")}
|
|
</.nav_link>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<.button_group>
|
|
<.universal_search_trigger />
|
|
<.dropdown placement="bottom-end">
|
|
<:toggle>
|
|
<.button variant="soft">
|
|
<span class="sr-only">{gettext("Actions")}</span>
|
|
<.icon
|
|
name="hero-ellipsis-vertical"
|
|
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</.button>
|
|
</:toggle>
|
|
<.dropdown_link href={~p"/scrobbled-tracks"}>
|
|
<.icon
|
|
name="hero-musical-note"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Scrobbled Tracks")}
|
|
</.dropdown_link>
|
|
<.dropdown_link href={~p"/scrobble-rules"}>
|
|
<.icon
|
|
name="hero-adjustments-horizontal"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Scrobble Rules")}
|
|
</.dropdown_link>
|
|
<.dropdown_link href={~p"/online-store-templates"}>
|
|
<.icon
|
|
name="hero-building-storefront"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Online Store Templates")}
|
|
</.dropdown_link>
|
|
<.dropdown_link href={~p"/backup"}>
|
|
<.icon
|
|
name="hero-archive-box-arrow-down"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Backup")}
|
|
</.dropdown_link>
|
|
<.dropdown_separator />
|
|
<.dropdown_link href={~p"/dev/dashboard"}>
|
|
<.icon
|
|
name="hero-chart-bar"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Live Dashboard")}
|
|
</.dropdown_link>
|
|
<.dropdown_link href={~p"/dev/oban"}>
|
|
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
|
|
{gettext("Oban")}
|
|
</.dropdown_link>
|
|
<.dropdown_separator />
|
|
<.dropdown_link href={~p"/login"}>
|
|
<.icon
|
|
name="hero-arrow-left-start-on-rectangle"
|
|
class="h-4 w-4 mr-2"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Logout")}
|
|
</.dropdown_link>
|
|
</.dropdown>
|
|
</.button_group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="px-4 py-4 max-sm:pb-20 sm:px-6 lg:px-8">
|
|
<div class="mx-auto max-w-screen-2xl">
|
|
<LiveToast.toast_group
|
|
flash={@flash}
|
|
corner={:top_right}
|
|
connected={assigns[:socket] != nil}
|
|
toasts_sync={assigns[:toasts_sync]}
|
|
toast_class_fn={&toast_class_fn/1}
|
|
/>
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
</main>
|
|
|
|
<.live_component module={MusicLibraryWeb.UniversalSearchLive.Index} id="universal-search" />
|