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