8f7ad3f673
- 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
67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
// Sidebar Component
|
|
|
|
export function renderSidebar({ libraries, tags, selectedLibrary, selectedTag, onSelectLibrary, onSelectTag, onHome }) {
|
|
const buildLibraryTree = (libs, parentId = null, depth = 0) => {
|
|
return libs
|
|
.filter(l => l.parentId === parentId)
|
|
.map(lib => {
|
|
const children = libs.filter(l => l.parentId === lib.id);
|
|
const hasChildren = children.length > 0;
|
|
const isSelected = selectedLibrary === lib.id;
|
|
|
|
return `
|
|
<div class="tree-node">
|
|
<div class="tree-item ${isSelected ? 'active' : ''}" data-action="library" data-library-id="${lib.id}">
|
|
<span class="tree-toggle ${hasChildren ? 'expanded' : ''}" style="padding-left:${depth * 12}px">
|
|
${hasChildren ? '▶' : ''}
|
|
</span>
|
|
<span class="icon">📁</span>
|
|
<span class="label">${escapeHtml(lib.name)}</span>
|
|
</div>
|
|
${hasChildren ? `<div class="tree-children">${buildLibraryTree(libraries, lib.id, depth + 1)}</div>` : ''}
|
|
</div>
|
|
`;
|
|
})
|
|
.join('');
|
|
};
|
|
|
|
return `
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|