fix root folder view

This commit is contained in:
nahakubuilde
2025-08-25 17:35:02 +01:00
parent 9583224c65
commit 9e73430441

View File

@@ -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>