fix root folder view
This commit is contained in:
@@ -169,6 +169,26 @@
|
||||
background-color: #b91c1c;
|
||||
}
|
||||
|
||||
/* Sidebar collapse behavior */
|
||||
#sidebar.collapsed {
|
||||
width: 2.5rem !important; /* 10px * 10 = 2.5rem */
|
||||
border-right: none;
|
||||
}
|
||||
#sidebar.collapsed .sidebar-title,
|
||||
#sidebar.collapsed .sidebar-actions,
|
||||
#sidebar.collapsed .sidebar-content {
|
||||
display: none;
|
||||
}
|
||||
#sidebar .toggle-btn {
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
#sidebar .toggle-btn:hover {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
@@ -243,26 +263,34 @@
|
||||
<!-- Header -->
|
||||
<div class="p-4 border-b border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-bold text-white">{{.app_name}}</h1>
|
||||
<div class="flex items-center space-x-2">
|
||||
<h1 class="sidebar-title text-xl font-bold text-white">{{.app_name}}</h1>
|
||||
<div class="flex items-center space-x-2 items-center">
|
||||
<div class="sidebar-actions flex items-center space-x-2">
|
||||
<a href="/settings" class="text-gray-400 hover:text-white transition-colors" title="Settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
<button id="sidebar-toggle" class="toggle-btn" title="Toggle sidebar" aria-label="Toggle sidebar">
|
||||
<i id="sidebar-toggle-icon" class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="px-4 py-4">
|
||||
<div class="sidebar-content px-4 py-4">
|
||||
<a href="/create" class="btn-primary text-sm w-full text-center">
|
||||
<i class="fas fa-plus mr-2"></i>New Note
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- File Tree -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pb-4">
|
||||
<div class="sidebar-content flex-1 overflow-y-auto px-4 pb-4">
|
||||
{{if .notes_tree}}
|
||||
{{template "tree_node" dict "node" .notes_tree "active_path" .active_path "current_note" .current_note}}
|
||||
{{/* Render only children of the root to hide root folder label */}}
|
||||
{{range .notes_tree.Children}}
|
||||
{{template "tree_node" dict "node" . "active_path" $.active_path "current_note" $.current_note}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -379,8 +407,39 @@
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
// Sidebar toggle persistence
|
||||
function applySidebarState(collapsed) {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const icon = document.getElementById('sidebar-toggle-icon');
|
||||
if (!sidebar || !icon) return;
|
||||
if (collapsed) {
|
||||
sidebar.classList.add('collapsed');
|
||||
icon.classList.remove('fa-chevron-left');
|
||||
icon.classList.add('fa-chevron-right');
|
||||
} else {
|
||||
sidebar.classList.remove('collapsed');
|
||||
icon.classList.remove('fa-chevron-right');
|
||||
icon.classList.add('fa-chevron-left');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Restore sidebar state
|
||||
const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
|
||||
applySidebarState(collapsed);
|
||||
|
||||
// Wire toggle button
|
||||
const toggleBtn = document.getElementById('sidebar-toggle');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
const currentlyCollapsed = document.getElementById('sidebar').classList.contains('collapsed');
|
||||
const next = !currentlyCollapsed;
|
||||
localStorage.setItem('sidebarCollapsed', String(next));
|
||||
applySidebarState(next);
|
||||
});
|
||||
}
|
||||
|
||||
// Expand active path in tree
|
||||
expandActivePath();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user