WIP #3053

diff --git a/wp-content/themes/CCV/resources/assets/images/menu-close.svg b/wp-content/themes/CCV/resources/assets/images/menu-close.svg
new file mode 100644 (file)
index 0000000..e8915a8
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/menu-close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" 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="#fff"/></svg>

diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js
index ea0eddd7547b38acf866cfe91d43ff7edf11f233..ad9e74be8d91346ecddf5519d142a560950d74d5 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/menu.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js
@@ -20,17 +20,18 @@ document.addEventListener(
       position: 'right' // Todo: switch for Arabic, based on class or text direction?
     });
 
+    // Open / Close Menu handlers
     document.querySelector(`a[href="#menu"]`)
       .addEventListener('click', (event) => {
           mmenu.open();
           event.preventDefault();
           event.stopPropagation();
 
-          if (null === document.querySelector('.mm--close')) {
+          if (null === document.querySelector('#close-menu')) {
 
-            nav.innerHTML = '<a class="mm--close"></a>' + nav.innerHTML;
+            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;
 
-            document.querySelector('.mm--close').addEventListener('click', (event) => {
+            document.querySelector('#close-menu').addEventListener('click', (event) => {
               mmenu.close();
             });
 
@@ -40,11 +41,39 @@ document.addEventListener(
 
 function buildMobileMenu() {
   const menu = document.createElement('div');
-  const menuItems = document.querySelector('.main-menu');
+  const menuItems = document.querySelector('.main-menu').cloneNode(true);
+  const ctaButtons = document.querySelectorAll('.header-cta');
+  const locales = document.querySelectorAll('.nav-secondary .locales a');
+  const localeLinks = Array.from(locales).reduce((html, link) => html + link.outerHTML, '');
 
-  // Todo: copy other items into mobile menu (secondary nav buttons, language switcher etc)
-  menu.appendChild(menuItems.cloneNode(true));
+  // Prepend CTA links from header into main menu
+  // ctaButtons is a NodeList so we convert to an array to allow it to be reversed
+  // It needs to be reversed because we will prepend these links and we want the
+  // order to remain the same at the end...
+  Array.from(ctaButtons).reverse().forEach(function(button) {
+    let newItem = document.createElement('li');
+    newItem.className = 'cta-button';
+    newItem.innerHTML = button.outerHTML;
+    menuItems.insertBefore(newItem, menuItems.childNodes[0] || null);
+  });
+
+  // Append language switcher
+  let localesItem = document.createElement('li');
+  localesItem.className = 'locales';
+  localesItem.innerHTML = localeLinks;
+  menuItems.appendChild(localesItem);
+
+  // Remove link from top level menu items that have sub-menus (otherwise MMenu splits the link and the sub-menu arrow)
+  menuItems.querySelectorAll('.menu-item-has-children > a').forEach(function (link) {
+    let parent = link.parentNode;
+    let newWrapper = document.createElement('span');
+    newWrapper.innerText = link.innerText;
+    parent.insertBefore(newWrapper, parent.childNodes[0] || null);
+    parent.removeChild(link); // Replaced by the new element
+  });
 
   menu.setAttribute('id', menuID);
+  menu.appendChild(menuItems);
+
   document.body.appendChild(menu);
 }

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
new file mode 100644 (file)
index 0000000..c720810
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
@@ -0,0 +1,53 @@
+:root
+  --mm-width: 90%
+  --mm-max-width: 308px
+
+#mobile-menu
+  @apply bg-purple-dark text-white
+
+  // Submenu header
+  &:after
+    @apply font-display uppercase
+    opacity: 0.7
+    box-shadow: none
+    border-bottom: 1px solid rgba(#fff, 0.2)
+
+  &.mm--main:after
+    display: none
+
+  .menu-list
+    @apply bg-purple-dark
+
+  .menu-item
+    @apply bg-purple-dark text-white font-display uppercase
+
+    // Submenu arrow (if applicable)
+    &:before
+      opacity: 1
+
+    // Menu item divider
+    &:after
+      display: none
+
+// Close button
+#close-menu
+  padding: 0
+  position: absolute
+  top: 2.5vw
+  right: @top
+  width: 30px
+  height: @width
+  z-index: 1
+  cursor: pointer
+  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

diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php
index ec657b54763be34219858371d0d61bf60bbac38e..18e2f368e873f1757fd41a4a25f38a8b1e8bd967 100644 (file)
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -14,7 +14,7 @@
 
     <div class="nav-secondary absolute top-0 right-0 flex items-center">
 
-      <ul class="flex mr-2">
+      <ul class="locales flex mr-2">
         @foreach ($languages as $lang)
           <li class="mr-4">
             <a href="{{ $lang['url'] }}" @if($lang['current_lang']) class="border-b-2 border-pink"@endif>
@@ -25,14 +25,14 @@
       </ul>
 
       @if ($button_1)
-        <a href="{{ $button_1->url }}" class="btn flex items-center">
+        <a href="{{ $button_1->url }}" class="header-cta btn flex items-center">
           <img src="@asset('images/teleconsultation.svg')" class="mr-2">
           {{ $button_1->title }}
         </a>
       @endif
 
       @if ($button_2)
-        <a href="{{ $button_2->url }}" class="btn flex items-center bg-teal">
+        <a href="{{ $button_2->url }}" class="header-cta btn flex items-center bg-teal">
           <img src="@asset('images/rendezvous.svg')" class="mr-2">
           {{ $button_2->title }}
         </a>