Merge pull request #10229 from CaptainYouz/issue-9909_mobile-menu

Mobile Menu: improve UX/UI of the mobile menu

themes/classic/_dev/css/components/mainmenu.scss

@@ -73,8 +73,7 @@
 }
 
 #mobile_top_menu_wrapper {
-  margin: .625rem 0 0;
-  padding-bottom: 0.625rem;
+  padding: 15px;
   background: white;
   #top-menu {
     margin-bottom: 0.625rem;
@@ -121,7 +120,7 @@
       margin-left: 0;
       width: 100%;
       min-width: 100%;
-      background: $gray-lighter;
+      background: white;
       ul[data-depth="0"] > li {
         border-bottom: 1px solid $gray;
       }

themes/classic/_dev/css/theme.scss

@@ -56,7 +56,7 @@
     #menu-icon {
       vertical-align: middle;
       cursor: pointer;
-      margin-left: 1rem;
+      margin: 0 1rem;
       .material-icons {
         line-height: 50px;
       }
@@ -295,7 +295,6 @@
     padding-bottom: 0;
   }
 }
-
 @include media-breakpoint-down(sm) {
   #wrapper {
     box-shadow: none;
@@ -312,10 +311,7 @@
       margin-bottom: 0.625rem;
       color: $gray-darker;
       .top-logo {
-        line-height: 50px;
-        vertical-align: middle;
-        width: 200px;
-        margin: 0 auto;
+        padding-top: 11px;
         a {
           img {
             max-height: 50px;
@@ -352,6 +348,15 @@
       a[data-depth="0"] {
         color: $gray-darker;
       }
+      .search-widget {
+        width: 100%;
+      }
+    }
+    &.is-open {
+      background-color: white;
+      .header-top {
+        background-color: white;
+      }
     }
   }
   section.checkout-step {

themes/classic/_dev/js/components/top-menu.js

@@ -68,14 +68,11 @@ export default class TopMenu extends DropDown {
   }
 
   toggleMobileMenu() {
-      if ($('#mobile_top_menu_wrapper').is(":visible")) {
-        $('#notifications').hide();
-        $('#wrapper').hide();
-        $('#footer').hide();
-      } else {
-        $('#notifications').show();
-        $('#wrapper').show();
-        $('#footer').show();
-      }
+    $('#header').toggleClass('is-open');
+    if ($('#mobile_top_menu_wrapper').is(":visible")) {
+      $('#notifications, #wrapper, #footer').hide();
+    } else {
+      $('#notifications, #wrapper, #footer').show();
+    }
   }
 }