Done #4139 @1

diff --git a/web/app/themes/Usines/resources/assets/scripts/menu.js b/web/app/themes/Usines/resources/assets/scripts/menu.js
index 67bdf69a0a28fcfe193d6715b88a4c86d53be0b4..0521425ff18ce4224cf4e238faaa075b25abb958 100644 (file)
--- a/web/app/themes/Usines/resources/assets/scripts/menu.js
+++ b/web/app/themes/Usines/resources/assets/scripts/menu.js
@@ -6,12 +6,12 @@ let menuOpenerID = `${menuID}-opener`;
 
 $(document).ready(() => {
 
-  // Add menu opener icon
-  $(`<a href="#${menuID}" id="${menuOpenerID}"><div></div></a>`).appendTo('body');
-
   // Add menu overlay element
   $(`<div id="${menuID}-overlay"></div>`).appendTo('body');
 
+  // Remove inline style that hides menu while loading
+  $(`#${menuID}`).attr('style', '');
+
   // Configure Sidr
   $(`#${menuOpenerID}`).sidr({
     name: menuID,

diff --git a/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl b/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl
index f5b606e6c6b4334401922b030245c888e32c82c5..5b10e1ac811566c92ba2ce1039fc1870551a9559 100644 (file)
--- a/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl
+++ b/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl
@@ -2,8 +2,8 @@
 
 // Actual menu built by Sidr plugin
 #mobile-menu
-  background-color: #fff
-  padding: 80px 30px 30px
+  @apply bg-white font-semibold
+  padding: 120px 35px 30px
   width: 320px
   z-index: 1000
 
@@ -18,7 +18,6 @@
 
   .menu-item
     padding: 0.5em 0
-    border-bottom: 1px solid #D4D4D4
 
   // Content overlay when menu is open
   &-overlay
@@ -42,16 +41,16 @@
   //=== Burger menu icon + animation
   &-opener
     position: absolute
-    width: 30px
+    width: 48px
     height: @width
     top: @width
-    left: @width
-    padding: 5px 0 // To match size of close X inside menu
+    left: 30px
     display: flex
     flex-direction: column
     justify-content: space-between
     z-index: 2000 // Needs to sit above Sidr
     pointer-events: auto // MMenu disables pointer events outside the menu when it's open
+    cursor: pointer
     transform: translateZ(0)
     transition-property: opacity
     transition-duration: 0.3s
@@ -71,29 +70,24 @@
       display: none
 
     &:hover
-      @apply text-red !important
-
-    &: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
+      .burger-bg
+        fill: theme('colors.blue')
+
+    .burger-bg
+      transition: fill 0.3s
 
-    &:after // Shorter bottom line
-      width: 50%
+    .burger-top, .burger-middle, .burger-bottom // 3 lines in burger icon
+      transition: all 0.3s ease-in-out
+      transform-origin: center
 
     // Morph to a cross when menu opens
     .sidr-open &
-      //color: #fff // Controls colour of lines
 
-      &:before // Top line
-        transform: translateY(9px) rotate(135deg)
+      .burger-top // Top line
+        transform: translate(-5px, 5px) rotate(45deg)
 
-      &:after // Bottom line
-        transform: translateY(-9px) rotate(-135deg)
-        width: 100%
+      .burger-bottom // Bottom line
+        transform: translate(-5px, -6px) rotate(-45deg)
 
-      div // Middle line
+      .burger-middle // Middle line
         transform: scale(0)

diff --git a/web/app/themes/Usines/resources/views/partials/header.blade.php b/web/app/themes/Usines/resources/views/partials/header.blade.php
index b700f471b5dd01ff97ad4b944b013c82455aa1a0..f961e7e7db6260075607deddcf747d6042fbcac9 100644 (file)
--- a/web/app/themes/Usines/resources/views/partials/header.blade.php
+++ b/web/app/themes/Usines/resources/views/partials/header.blade.php
@@ -51,10 +51,10 @@
 
 
   {{-- Mobile menu --}}
-  <nav id="mobile-menu">
+  <nav id="mobile-menu" style="display: none">
     {{--<a href="#" class="close" aria-label="<?= _('Fermer le menu') ?>">@svg('menu-close', ['class' => 'menu-close-icon'])</a>--}}
 
-    <ul class="nav-items">
+    <ul class="nav-items mb-4">
       <li class="menu-item"><a href="{{ get_home_url() }}">{{ __('Accueil', 'usines') }}</a></li>
 
       @if (has_nav_menu('primary_navigation_left'))
@@ -77,6 +77,19 @@
           !!}
       @endif
     </ul>
+
+    @include('partials.social-networks')
+
   </nav>
 
 </header>
+
+{{-- Mobile Menu Opener (placed outside the header so it can be independent from the menu --}}
+<svg id="mobile-menu-opener" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.4 47.4">
+  <path fill="#EB958A" class="burger-bg" d="M48.4 22.7c0 5.1-.6 9.8-3.4 13.7-4.3 6-12.3 11-20.3 11-3 0-6-.6-8.6-1.6-8.8-3.5-16-13-16-23 0-4.4 2.2-8.5 4.3-12.1C8.4 3.7 16 0 24.7 0c7 0 13.4 1.1 17.7 6 3.7 4.1 6 10.6 6 16.7z"/>
+  <g fill="#fff">
+    <path class="burger-top" d="M34.8 16.6H13.6c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h21.2c.4 0 .8.3.8.8s-.4.8-.8.8z"/>
+    <path class="burger-middle" d="M34.8 24.4H13.6c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h21.2c.4 0 .8.3.8.8s-.4.8-.8.8z"/>
+    <path class="burger-bottom" d="M34.8 32.2H13.6c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h21.2c.4 0 .8.3.8.8s-.4.8-.8.8z"/>
+  </g>
+</svg>