fix: MegaMenu -> mobile Menu

bin/MegaMenu.js

@@ -76,6 +76,21 @@ define('package/quiqqer/menu/bin/MegaMenu', [
                     this.$hideCheck();
                 }.bind(this)
             });
+
+            var SlideNode = document.getElement('[data-qui="package/quiqqer/menu/bin/SlideOut"]'),
+                SlideOut  = QUI.Controls.getById(SlideNode.get('data-quiid'));
+
+            this.getElm().getElement('.quiqqer-menu-megaMenu-mobile').addEvents({
+                click: function () {
+                    if (!SlideOut) {
+                        SlideOut = QUI.Controls.getById(SlideNode.get('data-quiid'))
+                    }
+
+                    if (SlideOut) {
+                        SlideOut.toggle();
+                    }
+                }
+            });
         },
 
         /**

src/QUI/Menu/MegaMenu.css

@@ -34,3 +34,17 @@
     max-width: 1200px;
     width: 100%;
 }
+
+
+
+/** sub menu data
+ ================================================= */
+
+.quiqqer-menu-megaMenu-mobile {
+    cursor: pointer;
+    display: block;
+    float: right;
+    font-size: 20px;
+    line-height: 60px;
+    padding: 0 10px;
+}
\ No newline at end of file

src/QUI/Menu/MegaMenu.html

-<nav>
+<nav class="hide-on-mobile">
     {$prepend}
 
     <ul class="quiqqer-menu-megaMenu-list">
@@ -36,4 +36,15 @@
     </ul>
 
     {$append}
-</nav>
\ No newline at end of file
+</nav>
+<div class="hide-on-desktop">
+    {$prepend}
+
+    <div class="quiqqer-menu-megaMenu-mobile">
+        <span class="fa fa-bars"></span>
+        <span>Menü</span>
+    </div>
+
+    {$append}
+    {$Mobile->create()}
+</div>
\ No newline at end of file

src/QUI/Menu/MegaMenu.php

@@ -14,6 +14,11 @@
  */
 class MegaMenu extends AbstractMenu
 {
+    /**
+     * @var SlideOut
+     */
+    protected $Mobile;
+
     /**
      * @param array $attributes
      */
@@ -30,6 +35,20 @@ public function __construct($attributes = array())
 
         $this->addCSSClass('quiqqer-menu-megaMenu');
         $this->addCSSFile(dirname(__FILE__) . '/MegaMenu.css');
+
+        $this->Mobile = new QUI\Menu\SlideOut();
+
+        // defaults
+        $this->Mobile->setAttribute('Project', $this->getProject());
+        $this->Mobile->setAttribute('Site', $this->getSite());
+
+        $this->Mobile->setAttribute('data-menu-right', 10);
+        $this->Mobile->setAttribute('data-menu-top', 15);
+        $this->Mobile->setAttribute('data-show-button-on-desktop', 0);
+        $this->Mobile->setAttribute('data-qui-options-menu-width', 400);
+        $this->Mobile->setAttribute('data-qui-options-menu-button', 0);
+        $this->Mobile->setAttribute('data-qui-options-touch', 0);
+        $this->Mobile->setAttribute('data-qui-options-buttonids', 'mobileMenu');
     }
 
     /**
@@ -63,10 +82,22 @@ public function getBody()
                 break;
         }
 
+        $this->Mobile->setAttribute('Project', $this->getProject());
+        $this->Mobile->setAttribute('Site', $this->getSite());
+
+        $this->Mobile->setAttribute('data-menu-right', 10);
+        $this->Mobile->setAttribute('data-menu-top', 15);
+        $this->Mobile->setAttribute('data-show-button-on-desktop', 0);
+        $this->Mobile->setAttribute('data-qui-options-menu-width', 400);
+        $this->Mobile->setAttribute('data-qui-options-menu-button', 0);
+        $this->Mobile->setAttribute('data-qui-options-touch', 0);
+        $this->Mobile->setAttribute('data-qui-options-buttonids', 'mobileMenu');
+
         $Engine->assign(array(
             'this'         => $this,
             'Site'         => $this->getSite(),
             'Project'      => $this->getProject(),
+            'Mobile'       => $this->Mobile,
             'Start'        => $this->getStart(),
             'children'     => $this->getStart()->getNavigation(),
             'Rewrite'      => QUI::getRewrite(),

src/QUI/Menu/Menu.html

@@ -2,9 +2,9 @@
 
     <div class="page-navigation">
 
-        <a href="{url id=1}" class="page-navigation-home">
+        <a href="{url site=$Project->firstChild()}" class="page-navigation-home">
             <span class="fa fa-home"></span>
-            {site id=1 attribute="title"}
+            {$Project->firstChild()->getAttribute('title')}
         </a>
 
         {include file="`$FileMenu`"