Added overlay

assets/js/theme/nav/responsive.js

 const events = ['load', 'resize'];
 let navBtn = document.querySelector('nav[role="navigation"] button'),
     menuHeader = document.querySelector('.menu'),
+    bodyOverlay = document.querySelector('body'),
     dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
     breckpointMd = 768,
     classMobile = 'show';
@@ -18,6 +19,7 @@ events.forEach((event) => {
                     navBtn.setAttribute('aria-expanded', 'true')
                 }
                 menuHeader.classList.toggle(classMobile)
+                bodyOverlay.classList.toggle('has-overlay')
             });
             
             dropdownBtns.forEach((dropdownBtn) => {

assets/sass/_theme/design-system/layout.sass

@@ -12,6 +12,14 @@ body
     &:not(.is-loaded)
         *
             transition-duration: 0s !important
+    &.has-overlay
+        &::after
+            animation-name: showIn
+            background-color: rgba(0,0,0,.3)
+            content: ""
+            display: block
+            inset: 82px 0 0 0
+            position: fixed
 
 figure
     margin: 0

assets/sass/_theme/design-system/nav.sass

@@ -75,6 +75,9 @@
         a
             text-decoration: none
         .nav-level-1
+            li 
+                a
+                    padding: 1rem 0
             > li:not(:last-child) 
                 border-bottom: 1px solid #adb5bd
             li.has-children
@@ -82,7 +85,6 @@
                     align-items: center
                     display: flex
                     justify-content: space-between
-                    padding: 1rem 0
                     @include icon("caret-bottom", after)
                     &::after
                         font-size: .375rem