fix: add mobile menu to projects view and CSS
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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');
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user