WIP #3053

diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js
index 7814c5177066ff8d346979af9b0af606ee51145f..9e31a445dec685b2bd04dedec1a70d61116e2885 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/menu.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js
@@ -5,6 +5,7 @@ import offcanvas from 'mmenu-light/bin/js/mmlight.offcanvas';
 MmenuLight.prototype.offcanvas = offcanvas;
 
 const menuID = 'mobile-menu';
+let menuOpen = false;
 
 document.addEventListener(
   'DOMContentLoaded', () => {
@@ -23,22 +24,23 @@ document.addEventListener(
     // Open / Close Menu handlers
     document.querySelector(`a[href="#menu"]`)
       .addEventListener('click', (event) => {
-          mmenu.open();
-          event.preventDefault();
-          event.stopPropagation();
-
-          if (null === document.querySelector('#close-menu')) {
-
-            //nav.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" id="close-menu" viewBox="0 0 30 30"><path d="M16 15L29.3 1.8c.3-.3.3-.8 0-1-.3-.3-.8-.3-1 0L15 14 1.8.7C1.5.4 1 .4.8.7c-.3.3-.3.8 0 1L14 15 .7 28.2c-.3.3-.3.8 0 1 .1.1.3.2.5.2s.4-.1.5-.2L15 16l13.2 13.2c.1.1.3.2.5.2s.4-.1.5-.2c.3-.3.3-.8 0-1L16 15z" fill="currentColor"/></svg>' + nav.innerHTML;
-
-            nav.innerHTML = '<button id="close-menu"></button>' + nav.innerHTML;
-
-            document.querySelector('#close-menu').addEventListener('click', (event) => {
-              mmenu.close();
-            });
 
+          if (menuOpen) {
+            mmenu.close();
+            menuOpen = false;
+          } else {
+            mmenu.open();
+            menuOpen = true;
           }
+
+          event.preventDefault();
+          event.stopPropagation();
       });
+
+    // Menu can be closed by clicking outside so we can't rely on the menu button setting the closed state
+    document.getElementById(menuID).addEventListener('mm:close', (event) => {
+      menuOpen = false;
+    });
 });
 
 function buildMobileMenu() {

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
index 416c29180652630e56a836b743b1703e974e8129..b3ce76fa26476cf02107e3882109cf7bf6db1aee 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
@@ -12,6 +12,7 @@
   &:hover
     @apply bg-teal-light
 
+  // Button sizes
   &.elementor-size-sm
     @apply text-sm
   &.elementor-size-md
@@ -21,6 +22,10 @@
   &.elementor-size-xl
     @apply text-xl
 
+// Button styles
+.elementor-element.elementor-button-info .elementor-button
+  @apply bg-teal
+
   //&-text
   //  @apply z-10 relative
 

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
index 9d84420f4f959139151ea25af0e530aa17ddd45a..b14713bd42574d05ceaac76aff20ff94ca5bd408 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
@@ -10,3 +10,7 @@ header.site
       width: 100%
       background-color: transparent
       z-index: 20
+
+.header-cta
+  padding: 1em 1.8em
+  line-height: 1.1

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
index a9c294223c2a897d2bd849a866c9b4aca42525b8..88aa462bc61f60ec6d5119d6e32a521d0ec1b1d2 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
@@ -1,3 +1,5 @@
+$menu-header-height = 90px
+
 :root
   --mm-width: 90%
   --mm-max-width: 308px
@@ -9,9 +11,13 @@
   @apply bg-purple-dark text-white antialiased
   font-size: 16px fixed
 
-  // Submenu header
+  // < Submenu header arrow
+  &:before
+    top: ($menu-header-height / 2)
+  // Submenu header content
   &:after
-    @apply font-display uppercase
+    @apply flex items-center font-display uppercase
+    height: $menu-header-height
     opacity: 0.7
     box-shadow: none
     border-bottom: 1px solid rgba(#fff, 0.2)
@@ -24,9 +30,9 @@
     .menu-item
       margin-left: 36px
 
-  .menu-list
+  .menu-list, .mm--open
     @apply bg-purple-dark
-    top: 90px // Space for close button + padding
+    top: $menu-header-height // Space for close button + padding
 
   .menu-item
     @apply bg-purple-dark text-white font-display uppercase
@@ -52,8 +58,10 @@
   // Buttons
   .cta-button
     a
+      @apply font-display font-medium subpixel-antialiased
       display: flex
-      padding-left: 16px
+      padding-left: 1em
+      font-size: inherit
 
     //img
     //  height: 20px
@@ -89,30 +97,6 @@
         @apply text-pink
 
 
-// Close button
-#close-menu
-  padding: 0
-  position: absolute
-  top: 30px
-  right: @top
-  width: 30px
-  height: @width
-  z-index: 1
-  cursor: pointer
-  outline: none
-  display: none
-  transition: color 0.2s
-
-  &:after
-    display: none
-
-  &:hover
-    @apply text-pink
-
-  // Only display at the top level of the menu
-  .mm--main &
-    display: block
-
 //==================
 
 // Burger menu icon + animation
@@ -127,12 +111,13 @@
   flex-direction: column
   justify-content: space-between
   z-index: 10000 // Needs to sit above MMenu
+  pointer-events: auto // MMenu disables pointer events outside the menu when it's open
 
   +above($breakpoint-menu)
     display: none
 
   &:hover
-    @apply text-pink
+    @apply text-pink !important
 
   &:after, &:before, div // 3 lines in burger icon
     content: ''

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
index 039ab50fbe2794821681cf25ab2beaf26d581c3a..8ec0f5959a3c543404de84f7ca02e99eaa3ca4f6 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
@@ -7,7 +7,7 @@
     @apply flex
 
   .menu-item
-    @apply block mx-5 relative
+    @apply block mx-5 relative cursor-pointer
     @apply border-b-2 border-transparent // Reserve space for active border
     @apply py-1 leading-tight // Adjust active border spacing