Add menu positioning settings

components/article-settings-editor.tpl

@@ -72,7 +72,7 @@
           "states": {
             "on": true,
             "off": false
-          },
+          }
         },
         {
           "titleI18n": "publishing_date",
@@ -82,7 +82,7 @@
           "states": {
             "on": true,
             "off": false
-          },
+          }
         },
         {
           "titleI18n": "article_author",
@@ -92,8 +92,8 @@
           "states": {
             "on": true,
             "off": false
-          },
-        },
+          }
+        }
       ],
 
       // Binded data object which should contain custom data object.

components/blog-settings-editor.tpl

@@ -60,7 +60,7 @@
           "states": {
             "on": true,
             "off": false
-          },
+          }
         },
         {
           "titleI18n": "publishing_date",
@@ -70,7 +70,7 @@
           "states": {
             "on": true,
             "off": false
-          },
+          }
         },
         {
           "titleI18n": "article_author",
@@ -80,8 +80,8 @@
           "states": {
             "on": true,
             "off": false
-          },
-        },
+          }
+        }
       ],
 
       // Binded data object which should contain custom data object.

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-settings-editor.tpl

@@ -0,0 +1,65 @@
+{% 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',
+    });
+
+    {% 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": "always-visible"
+            },
+            {
+              "titleI18n": "visible_when_scrolling_up",
+              "value": "visible-when"
+            }
+          ]
+        },
+      ],
+
+      // 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.mobile_menu_button_settings.menu_positioning }}  js-header-right">
             {% include "menu-main" %}
 
             <div class="site-options">

javascripts/main.js

@@ -61,6 +61,20 @@
     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 +263,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 +836,7 @@
       commentsHeight();
       handleMobileSearchHeight();
       toggleLanguageSettingsLocation();
+      toggleMobileMenuButtonPosition();
 
       $('.js-menu-language-settings-popover').hide();
     }, 100));
@@ -1040,7 +1064,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,20 @@
     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 +208,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 +781,7 @@
       commentsHeight();
       handleMobileSearchHeight();
       toggleLanguageSettingsLocation();
+      toggleMobileMenuButtonPosition();
 
       $('.js-menu-language-settings-popover').hide();
     }, 100));
@@ -985,7 +1009,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) {