Move sidebar toggle button into sidebar, make icon flip
This commit is contained in:
parent
17a5131ced
commit
4a99cb1166
3 changed files with 56 additions and 60 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue