From 7af11147066e240cce7df72753bab9e3cd898601 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 19 Jan 2021 10:35:02 +0100 Subject: [PATCH] Done #4139 @1 --- .../Usines/resources/assets/scripts/menu.js | 6 +-- .../styles/components/navigation-mobile.styl | 42 ++++++++----------- .../resources/views/partials/header.blade.php | 17 +++++++- 3 files changed, 36 insertions(+), 29 deletions(-) diff --git a/web/app/themes/Usines/resources/assets/scripts/menu.js b/web/app/themes/Usines/resources/assets/scripts/menu.js index 67bdf69..0521425 100644 --- 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 - $(`
`).appendTo('body'); - // Add menu overlay element $(`
`).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 f5b606e..5b10e1a 100644 --- 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 b700f47..f961e7e 100644 --- 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 --}} -