proyectos/simplenote-web
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mobile responsiveness

Browse Source 
- Add mobile navigation drawer with hamburger menu
- Sidebar slides in as overlay on mobile (<768px)
- Close button inside sidebar for mobile
- Ensure touch targets are at least 44px on mobile
- Make modals full-screen on mobile
- Editor toolbar scrolls horizontally on mobile
- Improve spacing and typography for small screens
- Keep dark theme consistent across breakpoints
- Projects page cards stack vertically on mobile
- Document cards full-width on mobile
This commit is contained in:
Hiro
2026-03-28 14:00:05 +00:00
parent c090cd3a71
commit 8f7ad3f673
5 changed files with 468 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
public/js/components/sidebar.js
View File

@@ -25,70 +25,36 @@ export function renderSidebar({ libraries, tags, selectedLibrary, selectedTag, o
.join('');
};
// Store callbacks in a way that's safe and doesn't rely on inline script execution
const callbacks = {
onSelectLibrary,
onSelectTag,
onHome
};
return `
<aside class="sidebar">
<div class="sidebar-scroll">
<div class="sidebar-section">
<h3>📚 Libraries</h3>
<div class="library-tree">
<div class="tree-item ${!selectedLibrary ? 'active' : ''}" data-action="home">
<span class="icon">🏠</span>
<span class="label">All Documents</span>
</div>
${buildLibraryTree(libraries)}
<div class="sidebar-scroll">
<div class="sidebar-section">
<h3>📚 Libraries</h3>
<div class="library-tree">
<div class="tree-item ${!selectedLibrary ? 'active' : ''}" data-action="home">
<span class="icon">🏠</span>
<span class="label">All Documents</span>
</div>
</div>
<div class="sidebar-section">
<h3>🏷️ Tags</h3>
<div class="tag-list">
${tags.map(tag => `
<div class="tag-item ${selectedTag === tag.name ? 'active' : ''}" data-action="tag" data-tag="${escapeHtml(tag.name)}">
<span>#${escapeHtml(tag.name)}</span>
<span class="tag-count">${tag.count}</span>
</div>
`).join('')}
</div>
</div>
<div class="quick-links">
<a class="quick-link" data-action="home">📋 All Documents</a>
<a class="quick-link" href="#" onclick="window.app.navigate('projects'); return false;">📂 Projects</a>
<a class="quick-link" href="#" onclick="window.showNewDocModal(); return false;">📄 New Document</a>
<a class="quick-link" href="#" onclick="window.showNewLibraryModal(); return false;">📁 New Library</a>
${buildLibraryTree(libraries)}
</div>
</div>
</aside>
<script>
(function() {
var callbacks = window.__sidebarCallbacks;
document.querySelectorAll('[data-action="home"]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
if (callbacks && callbacks.onHome) callbacks.onHome();
});
});
document.querySelectorAll('[data-action="library"]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var id = this.getAttribute('data-library-id');
if (callbacks && callbacks.onSelectLibrary) callbacks.onSelectLibrary(id);
});
});
document.querySelectorAll('[data-action="tag"]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var tag = this.getAttribute('data-tag');
if (callbacks && callbacks.onSelectTag) callbacks.onSelectTag(tag);
});
});
})();
</script>
<div class="sidebar-section">
<h3>🏷️ Tags</h3>
<div class="tag-list">
${tags.map(tag => `
<div class="tag-item ${selectedTag === tag.name ? 'active' : ''}" data-action="tag" data-tag="${escapeHtml(tag.name)}">
<span>#${escapeHtml(tag.name)}</span>
<span class="tag-count">${tag.count}</span>
</div>
`).join('')}
</div>
</div>
<div class="quick-links">
<a class="quick-link" data-action="home">📋 All Documents</a>
<a class="quick-link" href="#" onclick="window.app.navigate('projects'); return false;">📂 Projects</a>
<a class="quick-link" href="#" onclick="window.showNewDocModal(); return false;">📄 New Document</a>
<a class="quick-link" href="#" onclick="window.showNewLibraryModal(); return false;">📁 New Library</a>
</div>
</div>
`;
}