Ensure body is scrollable if sidenav is dismissed (#11660)

Fixes the body not being scrollable if you have a narrow window, open
the menu, then keep the menu open and make your window wide (causing it
to close).

Author: parlough

src/_sass/components/_sidebar.scss

@@ -15,13 +15,17 @@ $sidenav-divider-color: #e7e8ed;
   display: none;
   width: 100%;
   z-index: 1010;
+  background-color: $site-color-white;
 
   @at-root body.open_menu {
     overflow-y: hidden;
 
+    @media (min-width: 1024px) {
+      overflow-y: auto;
+    }
+
     #sidenav {
       display: block;
-      background-color: $site-color-white;
     }
   }
 
@@ -33,6 +37,7 @@ $sidenav-divider-color: #e7e8ed;
     top: calc($site-header-height);
     overscroll-behavior: auto;
     width: 16rem;
+    background: none;
   }
 
   .nav-header {

src/content/assets/js/main.js

@@ -17,6 +17,12 @@ function setupSidenavInteractivity() {
     document.body.classList.toggle('open_menu');
   });
 
+  window.addEventListener('resize', function() {
+    if (window.innerWidth >= 1024) {
+      document.body.classList.remove('open_menu');
+    }
+  });
+
   document.addEventListener('keydown', function(event) {
     if (event.key === 'Escape') {
       const activeElement = document.activeElement;