rayandrew/ai-servers
rayandrew/ai-servers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dashboard): add responsive mobile sidebar with toggle functionality

Browse source
This commit is contained in:
Ray Andrew 2026-02-15 03:18:37 -06:00
parent 2b6e20544b
commit f23a7c14c0
Signed by: rayandrew
SSH key fingerprint: SHA256:EUCV+qCSqkap8rR+p+zGjxHfKI06G0GJKgo1DIOniQY
1 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
llm-gateway/internal/dashboard/templates/layout.html
View file

@ -191,6 +191,40 @@
.health-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.health-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-radius: 8px; }
.health-item .provider-name { font-weight: 600; font-size: 0.85rem; }
/* Mobile menu button */
.mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 300; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; }
.mobile-menu-btn svg { width: 20px; height: 20px; }
/* Sidebar overlay */
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-overlay); z-index: 150; }
.sidebar-overlay.show { display: block; }
/* Responsive: tablet & mobile */
@media (max-width: 768px) {
.mobile-menu-btn { display: flex; }
.sidebar { left: -220px; z-index: 200; transition: left 0.25s ease; }
.sidebar.open { left: 0; }
.main { margin-left: 0; max-width: 100vw; padding: 60px 12px 12px; }
.cards { grid-template-columns: repeat(2, 1fr); }
.card .value { font-size: 1.2rem; }
table { min-width: 500px; font-size: 0.8rem; }
.modal { max-width: calc(100vw - 32px); padding: 20px; }
.filter-bar select { flex: 1; min-width: 120px; }
.page-header h1 { font-size: 1.1rem; }
}
/* Responsive: small phone */
@media (max-width: 480px) {
.cards { grid-template-columns: 1fr; }
.card .value { font-size: 1rem; }
.main { padding: 56px 8px 8px; }
.section { padding: 12px; }
.modal { padding: 16px; }
.page-header h1 { font-size: 1rem; }
table { font-size: 0.75rem; }
th, td { padding: 6px; }
}
</style>
</head>
<body>
@ -221,6 +255,10 @@ window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', fu
if (getThemePref() === 'auto') applyTheme('auto');
});
</script>
<button class="mobile-menu-btn" onclick="toggleMobileSidebar()" aria-label="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
<div class="sidebar">
<div class="sidebar-brand">LLM Gateway</div>
<nav class="sidebar-nav">
@ -256,6 +294,18 @@ document.body.addEventListener('htmx:pushedIntoHistory', function(e) {
var btn = document.getElementById('theme-btn');
if (btn) btn.textContent = 'Theme: ' + themeLabel(getThemePref());
})();
// Mobile sidebar toggle
function toggleMobileSidebar() {
document.querySelector('.sidebar').classList.toggle('open');
document.querySelector('.sidebar-overlay').classList.toggle('show');
}
// Close sidebar on nav link click (mobile)
document.querySelectorAll('.sidebar-nav a').forEach(function(a) {
a.addEventListener('click', function() {
document.querySelector('.sidebar').classList.remove('open');
document.querySelector('.sidebar-overlay').classList.remove('show');
});
});
</script>
</body>
</html>