Bellcom theme: Simple mobile navigation functionality

Author: Simon L. Lange

web/themes/custom/subsites/bellcom_theme/assets/css/bundle.css

@@ -991,21 +991,15 @@ video {
         position: fixed;
         height: 100vh;
         background-color: white;
-        right: 0;
-        bottom: 0;
+        right: -85%;
+        top: 80px;
         display: flex;
         align-items: center;
         transition: 0.3s ease-in
     }
 
 
       }
-.header .header__inner-wrapper .region--header nav #closeBtn {
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          font-size: 32px;
-        }
 @media only screen and (max-width: 768px) {
 .header .header__inner-wrapper .region--header nav {
           height: 80%;
@@ -1049,6 +1043,12 @@ video {
               transition: transform 0.25s ease-out;
               background-color: black;
             }
+.region.region--header.is-open {
+  right: 0 !important;
+}
+body.is-fixed {
+  position: fixed;
+}
 .hero-wrapper {
   min-height: 70vh;
   width: 100%;

web/themes/custom/subsites/bellcom_theme/assets/js/bundle.js

@@ -7,9 +7,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 const hamburgerBtn = document.querySelector('.hamburger');
-
-const menuElement = document.querySelector('.region--header');
+const menuElement = document.querySelector('.region.region--header');
+const bodyElement = document.querySelector('body');
 
 hamburgerBtn.addEventListener('click', () => {
-  menuElement.classList.add('is-open');
+  menuElement.classList.toggle('is-open');
+  bodyElement.classList.toggle('is-fixed');
 });
+
+window.onresize = function () {
+  var w = window.outerWidth;
+  if (w > 768) {
+    menuElement.classList.remove('is-open');
+    bodyElement.classList.remove('is-fixed');
+  }
+};

web/themes/custom/subsites/bellcom_theme/src/js/main.js

@@ -50,8 +50,8 @@
         position: fixed;
         height: 100vh;
         background-color: white;
-        right: 0;
-        bottom: 0;
+        right: -85%;
+        top: 80px;
         display: flex;
         align-items: center;
         transition: 0.3s ease-in;
@@ -63,13 +63,6 @@
 
       nav {
 
-        #closeBtn {
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          font-size: 32px;
-        }
-
         @media only screen and (max-width: 768px) {
           height: 80%;
           margin: 0 50px;
@@ -117,3 +110,10 @@
   }
 }
 
+.region.region--header.is-open {
+  right: 0 !important;
+}
+
+body.is-fixed {
+  position: fixed;
+}

web/themes/custom/subsites/bellcom_theme/src/scss/components/header.scss

@@ -26,9 +26,8 @@
   We call a macro which calls itself to render the full tree.
   @see https://twig.symfony.com/doc/1.x/tags/macro.html
 #}
-<div id="closeBtn"><i class="fa-solid fa-xmark"></i></div>
-{{ menus.menu_links(items, attributes, 0) }}
 
+{{ menus.menu_links(items, attributes, 0) }}
 {% macro menu_links(items, attributes, menu_level) %}
   {% import _self as menus %}
   {% if items %}