Move sidebar toggle button into sidebar, make icon flip

This commit is contained in:
Eli Ribble 2026-01-29 03:19:25 +00:00
parent 17a5131ced
commit 4a99cb1166
No known key found for this signature in database
3 changed files with 56 additions and 60 deletions

View file

@ -28,6 +28,8 @@
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('collapsed');
document.getElementById('content').classList.toggle('expanded');
document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-left');
document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-right');
});
</script>
</body>

View file

@ -1,54 +1,57 @@
{{define "sidebar"}}
<div id="sidebar">
<div class="sidebar-header">
<div class="logo-container">
<img class="logo" src="/static/img/nidus-logo-256-transparent.png"/>
</div>
</div>
<ul class="sidebar-menu">
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-house"></i></div>
<span class="menu-text ms-2">Home</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
<span class="menu-text ms-2">Analytics</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
<span class="menu-text ms-2">Reports</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-people"></i></div>
<span class="menu-text ms-2">Users</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
<span class="menu-text ms-2">Messages</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-gear"></i></div>
<span class="menu-text ms-2">Settings</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
<span class="menu-text ms-2">Help</span>
</a>
</li>
</ul>
<div id="sidebar">
<div class="sidebar-header">
<div class="logo-container">
<img class="logo" src="/static/img/nidus-logo-256-transparent.png"/>
</div>
</div>
<button id="sidebarToggle" class="btn btn-sm p-0">
<i id="sidebarToggleIcon" class="bi bi-chevron-left"></i>
</button>
<ul class="sidebar-menu">
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-house"></i></div>
<span class="menu-text ms-2">Home</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
<span class="menu-text ms-2">Analytics</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
<span class="menu-text ms-2">Reports</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-people"></i></div>
<span class="menu-text ms-2">Users</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
<span class="menu-text ms-2">Messages</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-gear"></i></div>
<span class="menu-text ms-2">Settings</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
<span class="menu-text ms-2">Help</span>
</a>
</li>
</ul>
</div>
{{end}}

View file

@ -5,15 +5,6 @@
{{define "content"}}
<!-- Main Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 shadow-sm">
<div class="container-fluid">
<button id="sidebarToggle" class="btn btn-outline-secondary">
<i class="bi bi-chevron-left"></i>
</button>
<span class="navbar-brand ms-3">My Application</span>
</div>
</nav>
<div class="container-fluid">
<div class="row mb-4">
<div class="col">