multipleof4/sune
1
0
Fork 0
mirror of https://github.com/multipleof4/sune.git synced 2026-01-14 08:38:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep: Sidebar partials

Browse Source
This commit is contained in:
multipleof4
2025-11-09 18:57:07 -08:00
parent 06050cf62f
commit 373b096598
1 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/partials/sidebars.html
View File

@@ -1,11 +1,37 @@
<div id="sidebarOverlayLeft" class="fixed inset-0 z-40 bg-black/20 hidden" @click="document.getElementById('sidebarLeft').classList.add('-translate-x-full');$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full');document.getElementById('sidebarOverlayRight').classList.add('hidden');hideThreadPopover();hideSunePopover()"></div> <div
<aside id="sidebarLeft" class="fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-white border-r border-gray-200 shadow-xl transform -translate-x-full transition-transform duration-200 ease-out flex flex-col"> id="sidebarOverlayLeft"
<div class="p-3 border-b flex items-center gap-2"><button id="newSuneBtn" class="px-3 py-2 rounded-xl bg-black text-white text-sm hover:bg-black/90">New sune</button><span class="text-xs text-gray-500">Click name to equip</span></div> class="fixed inset-0 z-40 bg-black/20 hidden"
@click="document.getElementById('sidebarLeft').classList.add('-translate-x-full');$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full');document.getElementById('sidebarOverlayRight').classList.add('hidden');hideThreadPopover();hideSunePopover()"
></div>
<aside
id="sidebarLeft"
class="fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-white border-r border-gray-200 shadow-xl transform -translate-x-full transition-transform duration-200 ease-out flex flex-col"
>
<div class="p-3 border-b flex items-center gap-2">
<button id="newSuneBtn" class="px-3 py-2 rounded-xl bg-black text-white text-sm hover:bg-black/90">New sune</button>
<span class="text-xs text-gray-500">Click name to equip</span>
</div>
<div id="suneList" class="flex-1 overflow-y-auto divide-y"></div> <div id="suneList" class="flex-1 overflow-y-auto divide-y"></div>
<div class="p-3 border-t relative"> <div class="p-3 border-t relative">
<button id="userMenuBtn" class="w-full flex items-center justify-between px-3 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition" @click.stop="document.getElementById('userMenu').classList.toggle('hidden')"><span class="flex items-center gap-2"><span class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center">👤</span><span class="text-sm">Account & Backup</span></span><i data-lucide="chevron-down" class="h-4 w-4"></i></button> <button
<div id="userMenu" class="absolute left-3 right-3 bottom-16 translate-y-2 rounded-xl border border-gray-200 bg-white shadow-lg hidden overflow-hidden"> id="userMenuBtn"
<button id="accountSettingsOption" class="menu-item"><i data-lucide="settings" class="h-4 w-4"></i><span>Settings</span></button> class="w-full flex items-center justify-between px-3 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition"
@click.stop="document.getElementById('userMenu').classList.toggle('hidden')"
>
<span class="flex items-center gap-2">
<span class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center">👤</span>
<span class="text-sm">Account & Backup</span>
</span>
<i data-lucide="chevron-down" class="h-4 w-4"></i>
</button>
<div
id="userMenu"
class="absolute left-3 right-3 bottom-16 translate-y-2 rounded-xl border border-gray-200 bg-white shadow-lg hidden overflow-hidden"
>
<button id="accountSettingsOption" class="menu-item">
<i data-lucide="settings" class="h-4 w-4"></i>
<span>Settings</span>
</button>
<button id="sunesImportOption" class="menu-item">Import sunes (.sune)</button> <button id="sunesImportOption" class="menu-item">Import sunes (.sune)</button>
<button id="sunesExportOption" class="menu-item">Export sunes (.sune)</button> <button id="sunesExportOption" class="menu-item">Export sunes (.sune)</button>
<button id="threadsImportOption" class="menu-item">Import threads (.json)</button> <button id="threadsImportOption" class="menu-item">Import threads (.json)</button>
@@ -14,8 +40,28 @@
<input id="importInput" type="file" accept="application/json,.json,.sune" class="hidden"/> <input id="importInput" type="file" accept="application/json,.json,.sune" class="hidden"/>
</div> </div>
</aside> </aside>
<div id="sidebarOverlayRight" class="fixed inset-0 z-40 bg-black/20 hidden" @click="$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"></div>
<aside id="sidebarRight" class="fixed inset-y-0 right-0 z-50 w-80 max-w-[90vw] bg-white border-l border-gray-200 shadow-xl transform translate-x-full transition-transform duration-200 ease-out flex flex-col"> <div
<div class="p-3 border-b text-sm font-medium flex items-center justify-between"><span>Threads</span><button id="closeThreads" class="p-1 rounded hover:bg-gray-100" aria-label="Close" @click="document.getElementById('sidebarOverlayRight').classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></button></div> id="sidebarOverlayRight"
class="fixed inset-0 z-40 bg-black/20 hidden"
@click="$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"
></div>
<aside
id="sidebarRight"
class="fixed inset-y-0 right-0 z-50 w-80 max-w-[90vw] bg-white border-l border-gray-200 shadow-xl transform translate-x-full transition-transform duration-200 ease-out flex flex-col"
>
<div class="p-3 border-b text-sm font-medium flex items-center justify-between">
<span>Threads</span>
<button
id="closeThreads"
class="p-1 rounded hover:bg-gray-100"
aria-label="Close"
@click="document.getElementById('sidebarOverlayRight').classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"
>
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div id="threadList" class="flex-1 overflow-y-auto divide-y"></div> <div id="threadList" class="flex-1 overflow-y-auto divide-y"></div>
</aside> </aside>