E.Noorlander/CodePress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move sidebar toggle to header and fix animation

Browse Source 
- Moved toggle button to header (next to logo)
- Removed floating button to prevent content overlap
- Changed sidebar animation to use margin-left for proper layout reflow
- Main content now automatically expands when sidebar collapses
- Simplified JS logic for cleaner toggle behavior
This commit is contained in:
Edwin Noorlander 2025-11-19 14:48:05 +01:00
parent ab54985176
commit a6461abede
1 changed files with 7 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
public/templates/layout.html
View File

@ -42,43 +42,16 @@
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
transition: transform 0.3s ease; transition: margin-left 0.3s ease;
position: relative;
z-index: 1000;
} }
.sidebar.collapsed { .sidebar.collapsed {
transform: translateX(-250px); margin-left: -250px;
}
.sidebar-toggle {
position: fixed;
top: 80px;
left: 10px;
z-index: 1001;
background-color: #0d6efd;
color: white;
border: none;
border-radius: 5px;
padding: 8px 12px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.sidebar-toggle:hover {
background-color: #0a58ca;
transform: scale(1.05);
}
.sidebar-toggle.shifted {
left: 270px;
}
.main-content.shifted {
margin-left: 0;
} }
.main-content { .main-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px;
transition: margin-left 0.3s ease;
} }
.folder-toggle { .folder-toggle {
@ -221,13 +194,16 @@
</style> </style>
</head> </head>
<body> <body>
<header class="bg-primary text-white py-3"> <header class="bg-primary text-white py-3">
<div class="container-fluid"> <div class="container-fluid">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col"> <div class="col">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<button class="btn btn-link text-white p-0 me-3" id="sidebarToggle">
<i class="bi bi-list fs-4"></i>
</button>
<img src="assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2"> <img src="assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
<h1 class="h3 mb-0">{{site_title}}</h1> <h1 class="h3 mb-0">CodePress</h1>
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
@ -242,9 +218,6 @@
<div class="main-wrapper"> <div class="main-wrapper">
<div class="content-wrapper"> <div class="content-wrapper">
<button class="sidebar-toggle" id="sidebarToggle">
<i class="bi bi-list"></i>
</button>
<nav class="sidebar" id="sidebar"> <nav class="sidebar" id="sidebar">
<div class="pt-3"> <div class="pt-3">
<ul class="nav flex-column"> <ul class="nav flex-column">
@ -290,22 +263,9 @@
// Sidebar toggle functionality // Sidebar toggle functionality
const sidebarToggle = document.getElementById('sidebarToggle'); const sidebarToggle = document.getElementById('sidebarToggle');
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
const mainContent = document.querySelector('.main-content');
sidebarToggle.addEventListener('click', function() { sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('collapsed'); sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('shifted');
sidebarToggle.classList.toggle('shifted');
// Change icon
const icon = this.querySelector('i');
if (sidebar.classList.contains('collapsed')) {
icon.classList.remove('bi-list');
icon.classList.add('bi-chevron-right');
} else {
icon.classList.remove('bi-chevron-right');
icon.classList.add('bi-list');
}
}); });
// Open folders that contain the current active page // Open folders that contain the current active page