From 373b096598f769b830651252e4b4a232fb5b8d0f Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Sun, 9 Nov 2025 18:57:07 -0800
Subject: [PATCH] Keep: Sidebar partials

---
 src/partials/sidebars.html | 64 ++++++++++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/partials/sidebars.html b/src/partials/sidebars.html
index fe6c785..ade6db8 100644
--- a/src/partials/sidebars.html
+++ b/src/partials/sidebars.html
@@ -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>
-<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="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>
+<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 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>
-    <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="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>
+    <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="sunesExportOption" class="menu-item">Export sunes (.sune)</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"/>
   </div>
 </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 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="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>
 </aside>