Add menu positioning settings

components/menu-language.tpl

@@ -26,6 +26,7 @@
               <button class="btn btn-js-styled js-menu-language-settings-toggle js-prevent-sideclick"></button>
             </li>
           {% endif %}
+          <li class="menu-item-cms js-mobile-menu-button-wrapper">{% include "menu-settings-editor" %} </li>
         </ul>
       {% endif %}
     </nav>

components/menu-mobile.tpl

@@ -46,7 +46,7 @@
         {% endfor %}
         {% if editmode %}
           <li class="edit-btn">{% languageadd %}</li>
-        {% endif %}
+        {% endif %}       
       </ul>
     </div>
   {% endif %}

components/menu-settings-editor.tpl

@@ -0,0 +1,67 @@
+{% if editmode %}
+  <button class="mobile-menu-button-settings"></button>
+{% endif %}
+
+{% editorjsblock %}
+  <!-- Settings popover javascript. -->
+  <script
+    src="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js"
+  ></script>
+
+  <!-- Setings popover initiation. -->
+  <script>
+    var siteData = new Edicy.CustomData({
+      type: 'site',
+      id: {{ site.id }}
+    });
+
+    {% if site.data.mobile_menu_button_settings %}
+      var valuesObj = {{ site.data.mobile_menu_button_settings | json }};
+    {% else %}
+      var valuesObj = {};
+    {% endif %};
+
+    var mobileMenuSettingsButton = document.querySelector('.mobile-menu-button-settings');
+
+    var SettingsEditor = new Edicy.SettingsEditor(mobileMenuSettingsButton, {
+      menuItems: [
+        {
+          "titleI18n": "menu_positioning",
+          "type": "radio",
+          "key": "menu_positioning",
+          "list": [
+            {
+              "titleI18n": "fixed_in_header",
+              "value": ""
+            },
+            {
+              "titleI18n": "always_visible",
+              "value": "visible-when"
+            },
+            {
+              "titleI18n": "visible_when_scrolling_up",
+              "value": "always-visible"
+            },
+          ],
+
+        },
+      ],
+
+      // Binded data object which should contain custom data object.
+      values: valuesObj,
+
+      // Style type the button.
+      buttonStyle: 'default',
+      // Title for the button.
+      buttonTitleI18n: 'mobile_view_settings',
+
+      commit: function(data) {
+        siteData.set('mobile_menu_button_settings', data, {
+        success: function() {
+          window.location.reload();
+      }
+  });
+}
+    });
+  </script>
+{% endeditorjsblock %}

components/site-header.tpl

@@ -11,7 +11,7 @@
             <div class="header-title content-area">{% unless editmode %}<a href="{{ site.root_item.url }}">{% endunless %}{% editable site.header %}{% unless editmode %}</a>{% endunless %}</div>
           </div>
 
-          <div class="header-right js-header-right">
+          <div class="header-right {{ site.data.menu_position_settings.menu_positioning }}  js-header-right">
             {% include "menu-main" %}
 
             <div class="site-options">

javascripts/main.js

@@ -61,6 +61,21 @@
     return $('html').hasClass('editmode');
   };
 
+  // show mobile menu on scrolling up
+  var lastScrollTop = 0;
+  $(window).scroll(function() {
+    var st = $(this).scrollTop();
+    if (st > lastScrollTop) {
+      setTimeout(function(){
+        $('.visible-when').removeClass('scrolling');
+      }, 400);
+    } else {
+      $('.visible-when').addClass('scrolling');
+
+    }
+    lastScrollTop = st;
+  });
+
   // Function to limit the rate at which a function can fire.
   var debounce = function(func, wait, immediate) {
     var timeout;
@@ -249,6 +264,15 @@
     }
   };
 
+  var toggleMobileMenuButtonPosition = function() {
+    var $mobileMenuButtonElement = $('.js-mobile-menu-button-wrapper');
+    if ($(window).width() <= 1024) {
+      $mobileMenuButtonElement.appendTo('.js-menu-main-mobile');
+    } else if ($(window).width() > 1024) {
+      $mobileMenuButtonElement.appendTo('.js-menu-language-popover-setting-parent');
+    }
+  };
+
   var bindFallbackHeaderLeftWidthCalculation = function() {
     var headerWidth = $('.js-header-top-wrap').width(),
         headerRight = $('.js-header-right'),
@@ -813,6 +837,7 @@
       commentsHeight();
       handleMobileSearchHeight();
       toggleLanguageSettingsLocation();
+      toggleMobileMenuButtonPosition();
 
       $('.js-menu-language-settings-popover').hide();
     }, 100));
@@ -1040,7 +1065,7 @@
     focusFormWithErrors();
     //autoSizeFormCommentArea();
     detectDesignEditorChanges();
-
+    toggleMobileMenuButtonPosition();
     if (!Modernizr.flexbox && editmode()) {
       bindFallbackHeaderLeftWidthCalculation();
     }

manifest.json

@@ -159,6 +159,13 @@
       "layout_name": "menu-mobile",
       "title": "menu-mobile"
     },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/menu-settings-editor.tpl",
+      "layout_name": "menu-settings-editor",
+      "title": "menu-settings-editor"
+    },
     {
       "content_type": "component",
       "component": true,

sources/javascripts/concat/base.js

@@ -6,6 +6,21 @@
     return $('html').hasClass('editmode');
   };
 
+  // show mobile menu on scrolling up
+  var lastScrollTop = 0;
+  $(window).scroll(function() {
+    var st = $(this).scrollTop();
+    if (st > lastScrollTop) {
+      setTimeout(function(){
+        $('.visible-when').removeClass('scrolling');
+      }, 400);
+    } else {
+      $('.visible-when').addClass('scrolling');
+
+    }
+    lastScrollTop = st;
+  });
+
   // Function to limit the rate at which a function can fire.
   var debounce = function(func, wait, immediate) {
     var timeout;
@@ -194,6 +209,15 @@
     }
   };
 
+  var toggleMobileMenuButtonPosition = function() {
+    var $mobileMenuButtonElement = $('.js-mobile-menu-button-wrapper');
+    if ($(window).width() <= 1024) {
+      $mobileMenuButtonElement.appendTo('.js-menu-main-mobile');
+    } else if ($(window).width() > 1024) {
+      $mobileMenuButtonElement.appendTo('.js-menu-language-popover-setting-parent');
+    }
+  };
+
   var bindFallbackHeaderLeftWidthCalculation = function() {
     var headerWidth = $('.js-header-top-wrap').width(),
         headerRight = $('.js-header-right'),
@@ -758,6 +782,7 @@
       commentsHeight();
       handleMobileSearchHeight();
       toggleLanguageSettingsLocation();
+      toggleMobileMenuButtonPosition();
 
       $('.js-menu-language-settings-popover').hide();
     }, 100));
@@ -985,7 +1010,7 @@
     focusFormWithErrors();
     //autoSizeFormCommentArea();
     detectDesignEditorChanges();
-
+    toggleMobileMenuButtonPosition();
     if (!Modernizr.flexbox && editmode()) {
       bindFallbackHeaderLeftWidthCalculation();
     }

sources/stylesheets/components/_navigation-menus.scss

@@ -183,7 +183,7 @@
 }
 
 .menu-item-cms {
-  margin-left: 10px;
+  margin-left: 15px;
 
   &.float-right {
     float: right;
@@ -221,21 +221,13 @@
     }
   }
 
-  .mobilemenu-open,
   .mobilesearch-open {
     position: fixed;
     overflow: hidden;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-
-    #mobile-menu {
-      position: absolute;
-      top: 0;
-      width: 250px;
-      height: 100%;
-    }
   }
 
   .mobile-menu-toggler {
@@ -298,15 +290,12 @@
 
   #mobile-menu {
     transition: transform .5s;
-    transform: translate3d(100%, 0, 0);
     font-family: $font-main;
-    position: fixed;
     z-index: 1000;
-    top: 0;
-    right: 0;
+    position: fixed;
+    overflow: auto;
     height: 100%;
     display: block;
-    overflow: auto;
     box-sizing: border-box;
     width: 250px;
     padding: 30px 20px;
@@ -325,7 +314,8 @@
     }
 
     .mobilemenu-open & {
-      transform: translate3d(0, 0, 0);
+      right: 0px;
+      top: 0px;
     }
 
     .search-open-btn {
@@ -698,16 +688,15 @@ $flags:
 
     &.menu-item-cms {
       padding-right: 18px;
-      padding-left: 18px;
-
+      padding-bottom: 10px;
+      
       &:last-child {
-        padding-top: 5px;
         padding-bottom: 10px;
 
         .language-menu-mode-list & {
           padding-right: 9px;
         }
-
+        
         #mobile-menu & {
           padding-top: 0;
           padding-left: 0

sources/stylesheets/components/_site-header.scss

@@ -105,6 +105,32 @@
 
     @media screen and (max-width: $tablet-1) {
       margin-top: 1px;
+
+      &.always-visible {
+        position: fixed;
+        top: 40px;
+        right: 40px;
+        z-index: 1001;
+        height: 100vh;
+
+        .mobilemenu-open & {
+          right: 270px;
+        }
+      }
+
+      &.visible-when, {
+        &.scrolling {
+          position: fixed;
+          top: 40px;
+          right: 40px;
+          z-index: 1001;
+          height: 100vh;
+
+          .mobilemenu-open & {
+            right: 270px;
+          }
+        }
+      }
     }
 
     @media screen and (max-width: $tablet-3) {

sources/stylesheets/general/_base.scss

@@ -2,6 +2,7 @@
 // BASICS
 // =============================================================================
 html {
+
   @media screen and (max-width: $tablet-3) {
     &.search-open,
     &.comments-open {
@@ -30,16 +31,12 @@ body {
       height: 100%;
       overflow: hidden;
     }
-  }
 
-  @media screen and (max-width: $tablet-3) {
-    .mobilemenu-open & {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
+    .js-background-type {
+      .mobilemenu-open & {
+        position: relative;
+        left: -250px;
+      }
     }
   }
 }
@@ -114,7 +111,6 @@ a {
 .site-container {
   margin: 0 auto;
   position: relative;
-  perspective: 1000px;
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;
 
@@ -143,7 +139,8 @@ a {
 
   .mobilemenu-open & {
     @media screen and (max-width: $tablet-1) {
-      transform: translate3d(-250px, 0, 0);
+      position: absolute;
+      left: -250px;
     }
 
     &:after {