Fixing scrolling sidebar even when collapsed

app/frontend/templates/base.html

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

app/frontend/templates/main_menu.html

@@ -1,7 +1,6 @@
 <!-- partial -->
-<div class="container-fluid page-body-wrapper">
-  <!-- partial:partials/_sidebar.html -->
-  <style>
+<!-- partial:partials/_sidebar.html -->
+<style>
   @media screen and (max-width: 991px) {
     .sidebar-offcanvas {
       -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);
     }
   }
-  </style>
-  <script>
+</style>
+<script>
   function debounce(func, wait, immediate) {
     var timeout;
     return function () {
@@ -57,13 +56,15 @@
     if (isExtraLargeBreakpoint()) {
       let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
       $('body').toggleClass('sidebar-icon-only', !value);
+      $('body').toggleClass('sidebar-fixed', true);
       localStorage.setItem('crafty-sidebar-expanded', value);
     } else if (isLargeBreakpoint()) {
       $('body').toggleClass('sidebar-icon-only', true);
+      $('body').toggleClass('sidebar-fixed', true);
     }
   }
-  </script>
-  <nav class="sidebar sidebar-offcanvas" id="sidebar">
+</script>
+<nav class="sidebar sidebar-offcanvas" id="sidebar">
   <ul class="nav">
 
     <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}
@@ -140,5 +141,5 @@
     {% end %}
 
   </ul>
-  </nav>
-  <!-- partial -->
+</nav>
+<!-- partial -->