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:
@@ -124,6 +124,63 @@ body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent pane scrolling */
|
||||
transition: flex 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Collapsed sidebar state - mini sidebar */
|
||||
#sidebarPane.collapsed {
|
||||
flex: 0 0 50px;
|
||||
min-width: 50px;
|
||||
max-width: 50px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide file tree content when collapsed */
|
||||
#sidebarPane.collapsed #fileTree {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide collection selector when collapsed */
|
||||
#sidebarPane.collapsed .collection-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Visual indicator in the mini sidebar */
|
||||
#sidebarPane.collapsed::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-secondary);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
/* Hover effect on mini sidebar */
|
||||
#sidebarPane.collapsed:hover::before {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
/* Right arrow icon in the center of mini sidebar */
|
||||
#sidebarPane.collapsed::after {
|
||||
content: '\F285';
|
||||
/* Bootstrap icon chevron-right */
|
||||
font-family: 'bootstrap-icons';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebarPane.collapsed:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#editorPane {
|
||||
|
||||
Reference in New Issue
Block a user