sune/src/parts/sidebars.html

<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-2 border-b flex flex-col gap-2">
    <input id="suneRepoInput" type="text" placeholder="gh://owner/sunes" class="w-full h-9 rounded-lg border-0 bg-gray-100 px-3 text-xs font-mono focus:ring-2 focus:ring-black focus:bg-white"/>
    <div class="flex items-center justify-between gap-2">
      <button id="newSuneBtn" class="px-3 py-1.5 rounded-lg bg-black text-white text-[10px] font-bold uppercase tracking-wider hover:bg-black/90 transition">New Sune</button>
      <button id="suneSyncBtn" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-900 text-[10px] font-bold uppercase tracking-wider hover:bg-gray-200 transition flex items-center gap-1"><i data-lucide="refresh-cw" class="h-3 w-3"></i><span>Sync</span></button>
    </div>
  </div>
  <div id="suneList" class="flex-1 overflow-y-auto divide-y"></div>
  <div class="p-3 border-t relative flex items-center gap-2">
    <button id="userMenuBtn" class="flex-1 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 id="userMenuAvatar" class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center overflow-hidden shrink-0">👤</span><span class="text-sm">User</span></span><i data-lucide="chevron-down" class="h-4 w-4"></i></button>
    <a href="https://github.com/sune-org/sune" target="_blank" rel="noopener noreferrer" class="h-10 w-10 shrink-0 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center text-gray-700 hover:text-black" title="Visit the repository"><svg viewBox="0 0 24 24" class="h-5 w-5 fill-current" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg></a>
    <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>
    </div>
    <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-2 border-b flex flex-col gap-2">
    <input id="threadRepoInput" type="text" placeholder="gh://owner/repo" class="w-full h-9 rounded-lg border-0 bg-gray-100 px-3 text-xs font-mono focus:ring-2 focus:ring-black focus:bg-white"/>
    <div class="flex items-center justify-between gap-2">
      <div class="flex items-center gap-1">
        <button id="threadBackBtn" class="h-8 w-8 rounded hover:bg-gray-100 flex items-center justify-center hidden" title="Back"><i data-lucide="chevron-left" class="h-4 w-4"></i></button>
        <button id="threadFolderBtn" class="h-8 w-8 rounded hover:bg-gray-100 flex items-center justify-center hidden" title="New Folder"><i data-lucide="folder-plus" class="h-4 w-4"></i></button>
      </div>
      <button id="threadSyncBtn" class="px-3 py-1 rounded-lg bg-black text-white text-[10px] font-bold uppercase tracking-wider hover:bg-black/90 transition flex items-center gap-1"><i data-lucide="refresh-cw" class="h-3 w-3"></i><span>Sync</span></button>
    </div>
  </div>
  <div id="threadList" class="flex-1 overflow-y-auto divide-y"></div>
</aside>