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

@@ -1959,3 +1959,63 @@ ul, ol {
height: 28px; height: 28px;
font-size: 0.875rem; 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;
}
}

View File

@@ -17,11 +17,21 @@ export async function renderProjects(app) {
function render() { function render() {
appEl.innerHTML = ` appEl.innerHTML = `
<header class="app-header"> <header class="app-header">
<button class="mobile-nav-btn" onclick="toggleMobileMenu()" title="Menu">☰</button>
<div class="logo">📝 SimpleNote</div> <div class="logo">📝 SimpleNote</div>
<div class="header-actions"> <div class="header-actions">
<button class="btn btn-primary" onclick="window.showNewProjectModal()">+ New</button> <button class="btn btn-primary" onclick="window.showNewProjectModal()">+ New</button>
</div> </div>
</header> </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-page">
<div class="projects-header"> <div class="projects-header">
<h1>Projects</h1> <h1>Projects</h1>
@@ -137,4 +147,15 @@ window.showNewProjectModal = function() {
}; };
nameInput.focus(); 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');
}; };