Fixing scrolling sidebar even when collapsed

This commit is contained in:
Silversthorn 2022-10-04 23:10:03 +02:00
parent d87a2c4c17
commit 425cb3869b
2 changed files with 155 additions and 153 deletions

View File

@ -88,6 +88,7 @@
</div> </div>
</nav> </nav>
<div class="container-fluid page-body-wrapper">
{% include main_menu.html %} {% include main_menu.html %}
<div class="main-panel"> <div class="main-panel">

View File

@ -1,7 +1,6 @@
<!-- partial --> <!-- partial -->
<div class="container-fluid page-body-wrapper"> <!-- partial:partials/_sidebar.html -->
<!-- partial:partials/_sidebar.html --> <style>
<style>
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.sidebar-offcanvas { .sidebar-offcanvas {
-webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1); -webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
@ -9,8 +8,8 @@
box-shadow: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
} }
} }
</style> </style>
<script> <script>
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
var timeout; var timeout;
return function () { return function () {
@ -57,13 +56,15 @@
if (isExtraLargeBreakpoint()) { if (isExtraLargeBreakpoint()) {
let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false'; let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
$('body').toggleClass('sidebar-icon-only', !value); $('body').toggleClass('sidebar-icon-only', !value);
$('body').toggleClass('sidebar-fixed', true);
localStorage.setItem('crafty-sidebar-expanded', value); localStorage.setItem('crafty-sidebar-expanded', value);
} else if (isLargeBreakpoint()) { } else if (isLargeBreakpoint()) {
$('body').toggleClass('sidebar-icon-only', true); $('body').toggleClass('sidebar-icon-only', true);
$('body').toggleClass('sidebar-fixed', true);
} }
} }
</script> </script>
<nav class="sidebar sidebar-offcanvas" id="sidebar"> <nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav"> <ul class="nav">
<li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }} <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}
@ -140,5 +141,5 @@
{% end %} {% end %}
</ul> </ul>
</nav> </nav>
<!-- partial --> <!-- partial -->