diff --git a/public/css/style.css b/public/css/style.css index c4ab754..b11460d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1959,3 +1959,63 @@ ul, ol { height: 28px; font-size: 0.875rem; } + +/* === Mobile Menu === */ +.mobile-menu { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--color-bg); + z-index: 1000; + padding: var(--space-4); +} + +.mobile-menu.open { + display: block; +} + +.mobile-menu-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-4); + padding-bottom: var(--space-4); + border-bottom: 1px solid var(--color-border); +} + +.mobile-menu-header span { + font-weight: 600; + font-size: 1.125rem; +} + +.mobile-menu-content { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.mobile-menu-content a { + display: block; + padding: var(--space-3); + background: var(--color-bg-secondary); + border-radius: var(--radius-md); + color: var(--color-text); + text-decoration: none; + font-size: 1rem; +} + +.mobile-menu-content a:active { + background: var(--color-bg-tertiary); +} + +@media (max-width: 768px) { + .mobile-menu { + display: none; + } + .mobile-menu.open { + display: block; + } +} diff --git a/public/js/views/projects.js b/public/js/views/projects.js index 10d6a3f..cc8180c 100644 --- a/public/js/views/projects.js +++ b/public/js/views/projects.js @@ -17,11 +17,21 @@ export async function renderProjects(app) { function render() { appEl.innerHTML = `
+
+
+
+ Menu + +
+
+ 📋 All Projects +
+

Projects

@@ -137,4 +147,15 @@ window.showNewProjectModal = function() { }; nameInput.focus(); +} + +// Mobile menu functions +window.toggleMobileMenu = function() { + const menu = document.getElementById('mobile-menu'); + if (menu) menu.classList.toggle('open'); +}; + +window.closeMobileMenu = function() { + const menu = document.getElementById('mobile-menu'); + if (menu) menu.classList.remove('open'); };