feat: shift pages to bottom toolbar on mobile

This commit is contained in:
2026-06-08 23:57:48 +01:00
parent b2b92c2311
commit 8834feb5a1
8 changed files with 240 additions and 284 deletions
+32 -45
View File
@@ -16,52 +16,13 @@
<body>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Attendees</span>
</div>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<span style="font-weight:600;font-size:0.95rem;">Attendees</span>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<img src="assets/img/logo.png" alt="Logo" style="width:120px;height:auto;">
<span>SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom active">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
</div>
<!-- ─── Desktop sidebar ─── -->
<!-- ─── Desktop sidebar ─── -->
<div class="sidebar">
<div class="brand">
<span style="margin: 0 auto;">IMFestival SMS Dashboard</span>
@@ -765,6 +726,32 @@
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item active">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>