Fixes sidebar sliding

main
Yasen Pramatarov 2024-08-05 19:53:24 +03:00
parent 77e674bab5
commit 54b998a1a8
5 changed files with 50 additions and 11 deletions

View File

@ -134,3 +134,9 @@
.sidebar-content {
width: 250px;
}
.main-content {
transition: width: 0.5s ease;
}
.main-content.expanded {
}

View File

@ -0,0 +1,36 @@
document.addEventListener('DOMContentLoaded', function () {
var sidebar = document.getElementById('sidebar');
var mainContent = document.getElementById('mainContent');
var toggleButton = document.getElementById('toggleSidebarButton');
// update localStorage based on the current state
function updateStorage() {
var isSidebarCollapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('sidebarState', isSidebarCollapsed ? 'collapsed' : 'expanded');
}
// apply saved state
function applySavedState() {
var savedState = localStorage.getItem('sidebarState');
if (savedState === 'collapsed') {
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
} else {
sidebar.classList.remove('collapsed');
mainContent.classList.remove('expanded');
}
}
// Initialize
applySavedState();
toggleButton.addEventListener('click', function () {
// toggle sidebar and main content
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('expanded');
// Update with the new state
updateStorage();
});
});

View File

@ -8,14 +8,7 @@
</div>
<script>
// slide the sidebar to the left instead of default up
document.getElementById('toggleSidebarButton').addEventListener('click', function () {
document.getElementById('sidebar').classList.toggle('collapsed');
});
</script>
<script src="static/sidebar.js"></script>
</body>
</html>

View File

@ -2,6 +2,10 @@
<!-- Menu -->
<div class="menu-container">
<ul class="menu-left">
<button class="btn btn-secondary" type="button" id="toggleSidebarButton">
sidebar
</button>
<li><a href="index.php">home</a></li>
<?php if ( isset($_SESSION['username']) ) { ?>
<li><a href="?page=config">config</a></li>

View File

@ -2,9 +2,9 @@
<!-- Sidebar -->
<div class="col-md-3 sidebar-wrapper bg-light" id="sidebar">
<button class="btn btn-secondary" type="button" id="toggleSidebarButton">
<!--button class="btn btn-secondary" type="button" id="toggleSidebarButton">
sidebar
</button>
</button-->
<div class="sidebar-content card card-body">
<ul class="list-group">
<li class="list-group-item"><a href="#">stats</a></li>
@ -16,6 +16,6 @@
<!-- /Sidebar -->
<div class="col-md-9" id="main-content">
<div class="col-md-9 main-content" id="mainContent">
<!-- Main content -->