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 f6141473a85a1a117e68d6ba6f2a1a8309c738ed..7814c5177066ff8d346979af9b0af606ee51145f 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/menu.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js
@@ -29,7 +29,9 @@ document.addEventListener(
 
           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 = '<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();
@@ -41,12 +43,19 @@ document.addEventListener(
 
 function buildMobileMenu() {
   const menu = document.createElement('div');
+  const menuOpener = document.createElement('a');
   const menuWrapper = document.createElement('div');
   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, '');
 
+  // Make mobile menu opener link
+  menuOpener.href = '#menu';
+  menuOpener.className = 'mobile-menu-trigger';
+  menuOpener.innerHTML = '<div></div>'; // Empty div needed for styling purposes to draw the 3 burger icon lines
+  document.body.appendChild(menuOpener);
+
   // 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

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 ef1042849ecd86d0e3a12960db1f564739e42b66..9d84420f4f959139151ea25af0e530aa17ddd45a 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,7 +10,3 @@ header.site
       width: 100%
       background-color: transparent
       z-index: 20
-
-.mobile-menu-trigger
-  +above($breakpoint-menu)
-    display: none

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 8165fb1a2e1b192a20f53a751157f0d277b45950..a9c294223c2a897d2bd849a866c9b4aca42525b8 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
@@ -2,6 +2,9 @@
   --mm-width: 90%
   --mm-max-width: 308px
 
+.mm-blocker
+  background-color: rgba(#2E2C40, 0.8)
+
 #mobile-menu
   @apply bg-purple-dark text-white antialiased
   font-size: 16px fixed
@@ -96,6 +99,7 @@
   height: @width
   z-index: 1
   cursor: pointer
+  outline: none
   display: none
   transition: color 0.2s
 
@@ -108,3 +112,49 @@
   // Only display at the top level of the menu
   .mm--main &
     display: block
+
+//==================
+
+// Burger menu icon + animation
+.mobile-menu-trigger
+  position: absolute
+  width: 30px
+  height: @width
+  top: @width
+  right: @width
+  padding: 5px 0 // To match size of close X inside menu
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  z-index: 10000 // Needs to sit above MMenu
+
+  +above($breakpoint-menu)
+    display: none
+
+  &:hover
+    @apply text-pink
+
+  &:after, &:before, div // 3 lines in burger icon
+    content: ''
+    width: 100%
+    background-color: currentColor
+    display: block
+    height: 2px
+    transition: all 0.3s ease-in-out
+
+  &:after // Shorter bottom line
+    width: 50%
+
+  // Morph to a cross when menu opens
+  .mm-body--open &
+    color: #fff // Controls colour of lines
+
+    &:before // Top line
+      transform: translateY(9px) rotate(135deg)
+
+    &:after // Bottom line
+      transform: translateY(-9px) rotate(-135deg)
+      width: 100%
+
+    div // Middle line
+      transform: scale(0)

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 e8fb72f4da9e8145aec84e1e271b20c0321cc92e..f404030bcfd525dcecf8917f48f2e50c26b1a040 100644 (file)
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -11,8 +11,6 @@
       <nav class="nav-primary self-end">
         {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'main-menu menu-list', 'echo' => false]) !!}
       </nav>
-
-      <a href="#menu" class="mobile-menu-trigger mr-1v hover:text-pink">@svg('menu', 'fill-current')</a>
     @endif
 
     <div class="nav-secondary absolute top-0 right-0 flex items-center">
@@ -20,7 +18,7 @@
       <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>
+            <a href="{{ $lang['url'] }}" class="hover:text-pink @if($lang['current_lang']) border-b-2 border-pink @endif">
               {{ $lang['slug'] }}
             </a>
           </li>
@@ -28,14 +26,18 @@
       </ul>
 
       @if ($button_1)
-        <a href="{{ $button_1->url }}" class="header-cta btn btn-no-hover flex items-center">
+        <a href="{{ $button_1->url }}"
+           target="{{ $button_1->target }}"
+           class="header-cta btn btn-no-hover flex items-center text-sm">
           <img src="@asset('images/teleconsultation.svg')" class="mr-2">
           {{ $button_1->title }}
         </a>
       @endif
 
       @if ($button_2)
-        <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-teal">
+        <a href="{{ $button_2->url }}"
+           target="{{ $button_2->target }}"
+           class="header-cta btn btn-no-hover flex items-center bg-teal text-sm">
           <img src="@asset('images/rendezvous.svg')" class="mr-2">
           {{ $button_2->title }}
         </a>