firefrost-gaming/firefrost-services
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add mobile responsive sidebar for Trinity Console

Browse Source 
ISSUE: Holly reported sidebar overlapping content on mobile devices
SOLUTION: Mobile-responsive hamburger menu with slide-out sidebar

CHANGES:
- Added hamburger menu button (☰) visible only on mobile (<768px)
- Sidebar now slides in from left on mobile when menu is clicked
- Added close button (✕) in sidebar header for mobile
- Added dark overlay backdrop when sidebar is open
- Desktop layout unchanged (sidebar always visible)

MOBILE BEHAVIOR:
- Sidebar hidden by default on small screens
- Hamburger button in top-left of header
- Tap hamburger → sidebar slides in from left
- Tap overlay or ✕ button → sidebar slides out
- Smooth 0.3s transition animation

DESKTOP BEHAVIOR:
- No changes, sidebar always visible
- Hamburger menu hidden on screens >768px

Tested on: iPhone (Holly's device)
Status: ✅ WORKING

Reported by: Holly (unicorn20089)
Fixed by: Chronicler #51

Signed-off-by: Claude (Chronicler #51) <claude@firefrostgaming.com>
This commit is contained in:
Claude (Chronicler #51)
2026-04-01 10:26:56 +00:00
parent a3e85463e2
commit 7642082b30
1 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
services/arbiter-3.0/src/views/layout.ejs
View File

@@ -30,13 +30,42 @@
}
}
</script>
<style>
/* Mobile: Hide sidebar by default, show on toggle */
@media (max-width: 768px) {
#sidebar {
position: fixed;
left: -100%;
transition: left 0.3s ease;
z-index: 50;
height: 100vh;
}
#sidebar.open {
left: 0;
}
#sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 40;
}
#sidebar-overlay.open {
display: block;
}
}
</style>
</head>
<body class="bg-gray-100 dark:bg-darkbg text-gray-900 dark:text-gray-100 font-sans antialiased transition-colors duration-200">
<!-- Mobile menu overlay -->
<div id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.remove('open'); this.classList.remove('open');"></div>
<div class="flex h-screen overflow-hidden">
<aside class="w-64 bg-white dark:bg-darkcard border-r border-gray-200 dark:border-gray-700 flex flex-col">
<div class="p-6">
<aside id="sidebar" class="w-64 bg-white dark:bg-darkcard border-r border-gray-200 dark:border-gray-700 flex flex-col">
<div class="p-6 flex justify-between items-center">
<h1 class="text-2xl font-bold bg-gradient-to-r from-fire via-universal to-frost text-transparent bg-clip-text">Trinity Console</h1>
<!-- Mobile close button -->
<button onclick="document.getElementById('sidebar').classList.remove('open'); document.getElementById('sidebar-overlay').classList.remove('open');" class="md:hidden text-2xl">✕</button>
</div>
<nav class="flex-1 px-4 space-y-2">
<a href="/admin/dashboard" class="block px-4 py-2 rounded-md <%= currentPath === '/dashboard' ? 'bg-gray-200 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800' %>">
@@ -71,7 +100,11 @@
<main class="flex-1 flex flex-col overflow-hidden">
<header class="bg-white dark:bg-darkcard border-b border-gray-200 dark:border-gray-700 h-16 flex items-center justify-between px-6">
<h2 class="text-xl font-semibold"><%= title %></h2>
<div class="flex items-center gap-4">
<!-- Mobile hamburger menu -->
<button onclick="document.getElementById('sidebar').classList.add('open'); document.getElementById('sidebar-overlay').classList.add('open');" class="md:hidden text-2xl">☰</button>
<h2 class="text-xl font-semibold"><%= title %></h2>
</div>
<div class="flex items-center gap-4">
<button onclick="document.documentElement.classList.toggle('dark')" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
🌙/☀️