fix: add mobile menu to projects view and CSS

This commit is contained in:
Hiro
2026-03-28 14:20:07 +00:00
parent 4e1d4f80cc
commit fffb3c1b29
2 changed files with 81 additions and 0 deletions

View File

@@ -17,11 +17,21 @@ export async function renderProjects(app) {
function render() {
appEl.innerHTML = `
<header class="app-header">
<button class="mobile-nav-btn" onclick="toggleMobileMenu()" title="Menu">☰</button>
<div class="logo">📝 SimpleNote</div>
<div class="header-actions">
<button class="btn btn-primary" onclick="window.showNewProjectModal()">+ New</button>
</div>
</header>
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-header">
<span>Menu</span>
<button onclick="closeMobileMenu()">✕</button>
</div>
<div class="mobile-menu-content">
<a href="#" onclick="closeMobileMenu(); return false;">📋 All Projects</a>
</div>
</div>
<div class="projects-page">
<div class="projects-header">
<h1>Projects</h1>
@@ -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');
};