brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Add hamburger menu for mobile nav

Browse Source
This commit is contained in:
Davide Scaini
2026-05-11 11:37:33 +02:00
parent 8fbbf460a9
commit 93f6109028
1 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/layouts/Base.astro
+50 -6
View File
@@ -237,34 +237,34 @@ try {
id="admin-jobs-badge"
style="display:none"
title=""
class="text-xs px-2 py-0.5 rounded-full bg-amber-900/60 text-amber-300 border border-amber-700/50 animate-pulse cursor-default"
class="hidden sm:flex text-xs px-2 py-0.5 rounded-full bg-amber-900/60 text-amber-300 border border-amber-700/50 animate-pulse cursor-default"
></span>
<!-- Settings link — hidden until logged in -->
<a
id="nav-settings"
href={`${baseUrl}settings/`}
style="display:none"
class="text-xs text-zinc-500 hover:text-white transition-colors px-1"
class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-1"
>Settings</a>
<!-- Admin link — hidden until confirmed admin -->
<a
id="nav-admin"
href={`${baseUrl}admin/`}
style="display:none"
class="text-xs text-zinc-500 hover:text-white transition-colors px-1"
class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-1"
>Admin</a>
<!-- Logout button — hidden until logged in -->
<button
id="nav-logout"
style="display:none"
class="text-xs text-zinc-500 hover:text-white transition-colors px-2 h-8"
class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-2 h-8"
aria-label="Log out"
>Log out</button>
{editEnabled && (
<button
id="upload-btn"
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
class="hidden sm:flex text-zinc-400 hover:text-white transition-colors w-8 h-8 items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Upload activity"
title="Upload activity"
>↑</button>
@@ -276,8 +276,32 @@ try {
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Toggle theme"
>☀</button>
{!isPublicPage && (
<button
id="nav-hamburger"
style="display:none"
class="sm:hidden text-zinc-400 hover:text-white w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Menu"
>☰</button>
)}
</div>
</div>
{!isPublicPage && (
<div id="nav-menu" class="hidden border-t sm:hidden"
style="border-color: var(--border); background: var(--bg-card)">
<div class="max-w-7xl mx-auto px-4 py-2 flex flex-col">
<a href={`${baseUrl}settings/`}
class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors"
style="color: var(--text-4)">Settings</a>
<a id="nav-admin-m" href={`${baseUrl}admin/`}
style="display:none; color: var(--text-4)"
class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors">Admin</a>
<button id="nav-logout-m"
class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors text-left"
style="color: var(--text-4)">Log out</button>
</div>
</div>
)}
</nav>
{editEnabled && (
@@ -550,6 +574,8 @@ try {
if (settingsEl) settingsEl.style.display = '';
const logoutEl = document.getElementById('nav-logout');
if (logoutEl) logoutEl.style.display = '';
const hamburgerEl = document.getElementById('nav-hamburger');
if (hamburgerEl) hamburgerEl.style.display = '';
// Pre-populate the "keep original" checkbox from the instance default
const chk = document.getElementById('upload-keep-original');
@@ -584,6 +610,8 @@ try {
if (user.is_admin) {
const adminLink = document.getElementById('nav-admin');
if (adminLink) adminLink.style.display = '';
const adminLinkM = document.getElementById('nav-admin-m');
if (adminLinkM) adminLinkM.style.display = '';
const badge = document.getElementById('admin-jobs-badge');
async function pollJobs() {
try {
@@ -609,9 +637,25 @@ try {
} catch (_) {}
})();
document.getElementById('nav-logout')?.addEventListener('click', async () => {
async function doLogout() {
try { await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
window.location.href = baseUrl + 'login/';
}
document.getElementById('nav-logout')?.addEventListener('click', doLogout);
document.getElementById('nav-logout-m')?.addEventListener('click', doLogout);
const hamburger = document.getElementById('nav-hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger?.addEventListener('click', () => {
const open = navMenu?.classList.toggle('hidden') === false;
hamburger.textContent = open ? '✕' : '☰';
});
document.addEventListener('click', (e) => {
if (navMenu && !navMenu.classList.contains('hidden') &&
!navMenu.contains(e.target) && !hamburger?.contains(e.target)) {
navMenu.classList.add('hidden');
if (hamburger) hamburger.textContent = '☰';
}
});
</script>
)}