midd stories: update menu code to usability issue

Author: poojagunturu96

src/js/drawer.ts

@@ -9,11 +9,5 @@ Micromodal.init({
 Micromodal.init({
   openTrigger: 'data-drawer-midd-hub',
   closeTrigger: 'data-drawer-close',
-  disableScroll: false,
-  onShow: () => {
-    document.body.classList.add('has-toggled-elem');
-  },
-  onClose: () => {
-    document.body.classList.remove('has-toggled-elem');
-  }
+  disableScroll: false
 });

src/scss/components/_drawer.scss

@@ -66,6 +66,10 @@
     @include breakpoints.breakpoint(lg) {
       margin-right: -#{variables.$spacing-5};
     }
+
+    &.is-open {
+      display: none;
+    }
   }
 
   .drawer__overlay {

src/scss/components/_school-nav.scss

@@ -31,6 +31,14 @@
   }
 }
 
+.site-header--midd-hub {
+  .school-nav:focus-within {
+    .drawer--midd-hub.is-open {
+      display: block;
+    }
+  }
+}
+
 .school-nav__menu {
   nav:first-child {
     margin-top: variables.$spacing-3;

src/templates/partials/midd-hub-header.twig

@@ -48,14 +48,14 @@
             <span class="d-none d-lg-inline mr-2">Sections</span>
             {% include 'partials/icon.twig' with { name: 'bars' } %}
           </button>
-
+          
+          {% embed 'partials/midd-hub-nav.twig'
+            with {
+              title: 'Navigation'
+            }
+          %}
         </div>
 
-        {% embed 'partials/midd-hub-nav.twig'
-          with {
-            title: 'Navigation'
-          }
-        %}
         {% endembed %}
       </div>
     </div>

src/templates/partials/midd-hub-nav.twig

@@ -18,7 +18,7 @@
         {% for item in site_nav.items %}
           <li class="drawer-nav__item">
 
-            <a href="" class="drawer-nav__link drawer-nav__link--top">{{item.text}}</a>
+            <a href="#section-label" class="drawer-nav__link drawer-nav__link--top">{{item.text}}</a>
 
             {% if item.items %}
               <button