Merge branch 'feat#34' into 'dev'

feat: breakpoint setting to switch to mobile menu

See merge request #34

locale.xml

@@ -72,6 +72,14 @@
             <de><![CDATA[Erweitertes Slideout Menü]]></de>
             <en><![CDATA[Advanced Slideout Menu]]></en>
         </locale>
+        <locale name="mobileMenu.settings.breakPoint">
+            <de><![CDATA[Zum Mobile-Menu wechseln ab]]></de>
+            <en><![CDATA[Switch to mobile menu after]]></en>
+        </locale>
+        <locale name="mobileMenu.settings.breakPoint.desc">
+            <de><![CDATA[Wert, bei dessen Unterschreitung das Menü in die mobile Version wechselt (Standardwert ist <strong>767</strong>). Diese Angabe bezieht sich auf die Monitorgröße gemessen in Pixel.]]></de>
+            <en><![CDATA[Value below which the menu will switch to the mobile version (default value is <strong>767</strong>). This specification refers to the monitor size measured in pixels.]]></en>
+        </locale>
 
         <!-- mobile menu standard -->
         <locale name="mobileMenu.standard.settings.title">

settings.xml

@@ -18,6 +18,10 @@
                         <type><![CDATA[string]]></type>
                         <defaultvalue>slideout</defaultvalue>
                     </conf>
+                    <conf name="breakPoint">
+                        <type><![CDATA[number]]></type>
+                        <defaultvalue>767</defaultvalue>
+                    </conf>
                 </section>
                 <section name="mobileMenu.standard.settings">
                     <conf name="collapseSubmenu">
@@ -27,7 +31,7 @@
                         <type><![CDATA[number]]></type>
                         <defaultvalue>1</defaultvalue>
                     </conf>
-                </section>
+                </section>`
                 <section name="mobileMenu.slideoutAdvanced.settings">
                     <conf name="homeLink">
                         <type><![CDATA[number]]></type>
@@ -102,6 +106,14 @@
                                     <locale group="quiqqer/menu" var="mobileMenu.settings.template.slideoutAdvanced"/>
                                 </option>
                             </select>
+                            <input conf="mobileMenu.settings.breakPoint" type="number" min="0" max="5000">
+                                <text>
+                                    <locale group="quiqqer/menu" var="mobileMenu.settings.breakPoint"/>
+                                </text>
+                                <description>
+                                    <locale group="quiqqer/menu" var="mobileMenu.settings.breakPoint.desc"/>
+                                </description>
+                            </input>
                         </settings>
 
                         <!-- mobile menu standard -->

src/QUI/Menu/MegaMenu.Independent.html

-<nav class="hide-on-mobile">
+<style>
+    @media screen and (max-width: {$breakPoint}px) {
+        .megaMenu-hide-on-mobile {
+            display: none !important;
+        }
+    }
+
+    @media screen and (min-width: {$breakPoint + 1}px) {
+        .megaMenu-hide-on-desktop {
+            display: none !important;
+        }
+    }
+</style>
+
+<nav class="megaMenu-hide-on-mobile">
+
     {$prepend}
 
     <ul class="quiqqer-menu-megaMenu-list">
@@ -61,7 +76,7 @@
     {$append}
 </nav>
 {if $Mobile}
-    <div class="hide-on-desktop">
+    <div class="megaMenu-hide-on-desktop">
         {$prepend}
 
         <div class="quiqqer-menu-megaMenu-mobile">

src/QUI/Menu/MegaMenu.css

@@ -5,7 +5,7 @@
     width: 100%;
 }
 
-.quiqqer-menu-megaMenu .hide-on-desktop  {
+.quiqqer-menu-megaMenu .megaMenu-hide-on-desktop  {
     width: 100%;
 }
 
@@ -40,8 +40,6 @@
     width: 100%;
 }
 
-
-
 /** sub menu data
  ================================================= */
 

src/QUI/Menu/MegaMenu.html

-<nav class="hide-on-mobile">
+<style>
+    @media screen and (max-width: {$breakPoint}px) {
+        .megaMenu-hide-on-mobile {
+            display: none !important;
+        }
+    }
+
+    @media screen and (min-width: {$breakPoint + 1}px) {
+        .megaMenu-hide-on-desktop {
+            display: none !important;
+        }
+    }
+</style>
+
+<nav class="megaMenu-hide-on-mobile">
+
     {$prepend}
 
     <ul class="quiqqer-menu-megaMenu-list">
@@ -55,7 +70,7 @@
     {$append}
 </nav>
 {if $Mobile}
-<div class="hide-on-desktop">
+<div class="megaMenu-hide-on-desktop">
     {$prepend}
 
     <div class="quiqqer-menu-megaMenu-mobile">

src/QUI/Menu/MegaMenu.php

@@ -44,6 +44,7 @@ public function __construct($attributes = [])
             'showLevel'           => 1,
             'showHomeLink'        => false,
             'showShortDesc'       => false,
+            'breakPoint'          => 767
         ]);
 
         if ($this->getProject()->getConfig('menu.settings.type')) {
@@ -151,6 +152,15 @@ public function getBody()
         $this->setAttribute('data-qui-options-enablemobile', $this->getAttribute('enableMobile') ? 1 : 0);
         $this->setAttribute('data-qui-options-showmenuafter', $showMenuDelay);
 
+        $breakPoint = intval($this->getProject()->getConfig('mobileMenu.settings.breakPoint'));
+
+        if (!$breakPoint) {
+            $breakPoint = intval($this->getAttribute('breakPoint'));
+        }
+
+        if ($breakPoint < 1) {
+            $breakPoint = 767;
+        }
 
         if ($this->getAttribute('menuId')) {
             $IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
@@ -164,12 +174,12 @@ public function getBody()
                 'prepend'      => $this->prepend,
                 'append'       => $this->append,
                 'childControl' => $childControl,
-                'showMenu'     => true
+                'showMenu'     => true,
+                'breakPoint'   => $breakPoint
             ]);
 
-            $result             = [];
-            $result['html']     = $Engine->fetch(dirname(__FILE__).'/MegaMenu.Independent.html');
-            $result['subMenus'] = \array_unique($this->subMenus);
+            $result         = [];
+            $result['html'] = $Engine->fetch(dirname(__FILE__).'/MegaMenu.Independent.html');
         } else {
             $Engine->assign([
                 'this'         => $this,
@@ -183,18 +193,20 @@ public function getBody()
                 'prepend'      => $this->prepend,
                 'append'       => $this->append,
                 'childControl' => $childControl,
-                'showMenu'     => true
+                'showMenu'     => true,
+                'breakPoint'   => $breakPoint
             ]);
 
             if ($this->getProject()->getConfig('menu.settings.type') == 'noMenu') {
                 $Engine->assign('showMenu', false);
             }
 
-            $result             = [];
-            $result['html']     = $Engine->fetch(dirname(__FILE__).'/MegaMenu.html');
-            $result['subMenus'] = \array_unique($this->subMenus);
+            $result         = [];
+            $result['html'] = $Engine->fetch(dirname(__FILE__).'/MegaMenu.html');
         }
 
+        $result['subMenus'] = \array_unique($this->subMenus);
+
         QUI\Cache\Manager::set($cache, $result);
 
         return $result['html'];

src/QUI/Menu/SlideOutAdvanced.css

@@ -103,18 +103,6 @@
 /** page navigation -> mobile
  * ========================================================== */
 
-@media screen and (max-width: 767px) {
-    .hide-on-mobile {
-        display: none !important;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .hide-on-desktop {
-        display: none !important;
-    }
-}
-
 .page-menu .quiqqer-slideoutAdvanced-page-navigation-level-1 {
     position: initial;
     display: block;