feat: Implement sidebar collapse and expand functionality

- Add CSS for collapsed sidebar state and transitions
- Introduce SidebarToggle class for managing collapse/expand logic
- Integrate SidebarToggle initialization in main script
- Add toggle button to navbar and make mini sidebar clickable
- Store sidebar collapsed state in localStorage
- Filter image files and directories in view mode via FileTree
- Make navbar brand clickable to navigate to collection root or home
This commit is contained in:
Mahmoud-Emad
2025-10-26 18:48:31 +03:00
parent 7a9efd3542
commit afcd074913
7 changed files with 290 additions and 46 deletions

View File

@@ -277,6 +277,9 @@ document.addEventListener('DOMContentLoaded', async () => {
darkMode.toggle();
});
// Initialize sidebar toggle
const sidebarToggle = new SidebarToggle('sidebarPane', 'sidebarToggleBtn');
// Initialize collection selector (always needed)
collectionSelector = new CollectionSelector('collectionSelect', webdavClient);
await collectionSelector.load();
@@ -321,7 +324,8 @@ document.addEventListener('DOMContentLoaded', async () => {
editor.setWebDAVClient(webdavClient);
// Initialize file tree (needed in both modes)
fileTree = new FileTree('fileTree', webdavClient);
// Pass isEditMode to control image filtering (hide images only in view mode)
fileTree = new FileTree('fileTree', webdavClient, isEditMode);
fileTree.onFileSelect = async (item) => {
try {
const currentCollection = collectionSelector.getCurrentCollection();
@@ -579,6 +583,22 @@ document.addEventListener('DOMContentLoaded', async () => {
await autoLoadPageInViewMode();
}
// Setup clickable navbar brand (logo/title)
const navbarBrand = document.getElementById('navbarBrand');
if (navbarBrand) {
navbarBrand.addEventListener('click', (e) => {
e.preventDefault();
const currentCollection = collectionSelector ? collectionSelector.getCurrentCollection() : null;
if (currentCollection) {
// Navigate to collection root
window.location.href = `/${currentCollection}/`;
} else {
// Navigate to home page
window.location.href = '/';
}
});
}
// Initialize mermaid (always needed)
mermaid.initialize({ startOnLoad: true, theme: darkMode.isDark ? 'dark' : 'default' });
// Listen for file-saved event to reload file tree