90 lines
3.6 KiB
Text
90 lines
3.6 KiB
Text
<aside
|
|
x-bind:class="sidebarVisible ? 'translate-x-0' : '-translate-x-full'"
|
|
class={[
|
|
"-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-65 flex-col overflow-y-hidden justify-between",
|
|
"bg-black duration-300 ease-linear shadow-lg sm:shadow-none dark:bg-boxdark lg:static lg:translate-x-0"
|
|
]}
|
|
@click.outside="sidebarVisible = false"
|
|
>
|
|
<section>
|
|
<div class="flex items-center justify-between gap-2 px-6 py-4">
|
|
<a href="/" class="flex items-center">
|
|
<img src={~p"/images/logo-2024-03-20.png"} alt="Pinchflat" class="w-auto" />
|
|
</a>
|
|
|
|
<button class="block mt-3 lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
|
|
<.icon name="hero-arrow-left" class="fill-current" />
|
|
</button>
|
|
</div>
|
|
<div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
|
|
<nav class="mt-3 px-4 py-4 lg:px-6">
|
|
<h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">
|
|
<span>MENU</span>
|
|
</h3>
|
|
<div class="flex flex-col justify-between">
|
|
<ul class="mb-6 flex flex-col gap-1.5">
|
|
<.sidebar_item icon="hero-home" text="Home" href={~p"/"} />
|
|
<.sidebar_item icon="hero-tv" text="Sources" href={~p"/sources"} />
|
|
<.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" href={~p"/media_profiles"} />
|
|
<.sidebar_submenu
|
|
icon="hero-cog-6-tooth"
|
|
text="Config"
|
|
current_path={Phoenix.Controller.current_path(@conn)}
|
|
>
|
|
<:submenu text="Settings" href={~p"/settings"} />
|
|
<:submenu text="App Info" href={~p"/app_info"} />
|
|
</.sidebar_submenu>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<nav class="px-4 py-4 lg:px-6">
|
|
<ul class="mb-6 flex flex-col gap-1.5">
|
|
<.sidebar_item
|
|
icon="hero-book-open"
|
|
text="Docs"
|
|
target="_blank"
|
|
href="https://github.com/kieraneglin/pinchflat/wiki"
|
|
icon_class="scale-110"
|
|
/>
|
|
<.sidebar_item icon="si-github" text="Github" target="_blank" href="https://github.com/kieraneglin/pinchflat" />
|
|
<.sidebar_item icon="si-discord" text="Discord" target="_blank" href="https://discord.gg/j7T6dCuwU4" />
|
|
<li>
|
|
<span
|
|
class={[
|
|
"font-medium text-bodydark1",
|
|
"group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
|
|
"duration-300 ease-in-out cursor-pointer",
|
|
"hover:bg-graydark dark:hover:bg-meta-4"
|
|
]}
|
|
phx-click={show_modal("donate-modal")}
|
|
>
|
|
<.icon name="hero-currency-dollar" class="scale-110" /> Donate
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span
|
|
class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm"
|
|
x-on:click={"markVersionAsSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
|
|
>
|
|
<span>Pinchflat {Application.spec(:pinchflat)[:vsn]}</span>
|
|
<a
|
|
href="https://github.com/kieraneglin/pinchflat/releases"
|
|
target="_blank"
|
|
class="bg-meta-2 text-boxdark px-1.5 rounded-full text-xs"
|
|
x-cloak
|
|
x-show={"!isVersionSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
|
|
>
|
|
NEW
|
|
</a>
|
|
</span>
|
|
<span class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm">
|
|
yt-dlp {Settings.get!(:yt_dlp_version)}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
</aside>
|