From: Vincent <vincent@enhydra.fr>
Date: Wed, 11 Nov 2020 13:46:06 +0000 (+0100)
Subject: .
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=75b54effb9674f1355daf077acdfd641e6f5a301;p=tortuga-home.git

.
---

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f9b40ea..483a094 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,12 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="352ce63a-b52a-41a2-979b-becda7920939" name="Default" comment=".">
-      <change afterPath="$PROJECT_DIR$/js/mmenu/mmenu-light.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/js/mmenu/mmenu-light.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/js/mmenu/mmenu-light.polyfills.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/style/menu.less" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.php" beforeDir="false" afterPath="$PROJECT_DIR$/index.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/js/home.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/home.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/mmenu/mmenu-light.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/mmenu/mmenu-light.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/scripts/lib/lib.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/lib.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/style/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style/style.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/style/style.less" beforeDir="false" afterPath="$PROJECT_DIR$/style/style.less" afterDir="false" />
@@ -56,11 +55,11 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="Less File" />
         <option value="Setup Script" />
         <option value="Python Script" />
         <option value="HTML File" />
         <option value="JavaScript File" />
+        <option value="Less File" />
       </list>
     </option>
   </component>
@@ -913,14 +912,7 @@
       <workItem from="1604828693023" duration="1255000" />
       <workItem from="1605001866699" duration="7793000" />
       <workItem from="1605087671373" duration="102000" />
-      <workItem from="1605087787424" duration="6276000" />
-    </task>
-    <task id="LOCAL-00332" summary=".">
-      <created>1595319345113</created>
-      <option name="number" value="00332" />
-      <option name="presentableId" value="LOCAL-00332" />
-      <option name="project" value="LOCAL" />
-      <updated>1595319345113</updated>
+      <workItem from="1605087787424" duration="13605000" />
     </task>
     <task id="LOCAL-00333" summary=".">
       <created>1595403718905</created>
@@ -1258,7 +1250,14 @@
       <option name="project" value="LOCAL" />
       <updated>1605093966322</updated>
     </task>
-    <option name="localTasksCounter" value="381" />
+    <task id="LOCAL-00381" summary=".">
+      <created>1605094978427</created>
+      <option name="number" value="00381" />
+      <option name="presentableId" value="LOCAL-00381" />
+      <option name="project" value="LOCAL" />
+      <updated>1605094978427</updated>
+    </task>
+    <option name="localTasksCounter" value="382" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -1304,12 +1303,12 @@
       <screen x="0" y="0" width="1707" height="920" />
     </state>
     <state x="740" y="229" key="#com.jetbrains.php.refactoring.extractMethod.PhpExtractMethodDialog#function0/0.0.1707.920@0.0.1707.920" timestamp="1604146905948" />
-    <state x="198" y="0" width="737" height="502" key="CommitChangelistDialog2" timestamp="1605093956565">
+    <state x="198" y="0" width="737" height="502" key="CommitChangelistDialog2" timestamp="1605094974306">
       <screen x="0" y="0" width="2560" height="1040" />
     </state>
     <state x="132" y="0" width="737" height="502" key="CommitChangelistDialog2/0.0.1707.920@0.0.1707.920" timestamp="1605086955514" />
     <state x="701" y="75" key="CommitChangelistDialog2/0.0.1920.1160@0.0.1920.1160" timestamp="1602171117745" />
-    <state x="198" y="0" width="745" height="567" key="CommitChangelistDialog2/0.0.2560.1040@0.0.2560.1040" timestamp="1605093956565" />
+    <state x="198" y="0" width="745" height="567" key="CommitChangelistDialog2/0.0.2560.1040@0.0.2560.1040" timestamp="1605094974306" />
     <state x="952" y="244" key="FileChooserDialogImpl" timestamp="1605087475486">
       <screen x="0" y="0" width="2560" height="1040" />
     </state>
diff --git a/index.php b/index.php
index 63dd79a..a46c491 100644
--- a/index.php
+++ b/index.php
@@ -25,12 +25,12 @@ function relativePath($p)
     <meta charset="UTF-8">
     <meta name="google" content="notranslate">
     <title>Tortuga Home Control</title>
+    <link href="<?php echo relativePath('js/mmenu/mmenu-light.css') ?>" rel="stylesheet">
+    <link href="<?php echo relativePath('style/fonts/fontawesome/all.min.css') ?>" rel="stylesheet">
+    <link href="<?php echo relativePath('style/fonts/roboto/stylesheet.css') ?>" rel="stylesheet">
     <link href="<?php echo relativePath('style/common.css') ?>" rel="stylesheet" type="text/css">
     <link href="<?php echo relativePath('style/style.css') ?>" rel="stylesheet" type="text/css">
     <link href="<?php echo relativePath('style/weatherstation.css') ?>" rel="stylesheet" type="text/css">
-    <link href="<?php echo relativePath('style/fonts/fontawesome/all.min.css') ?>" rel="stylesheet">
-    <link href="<?php echo relativePath('style/fonts/roboto/stylesheet.css') ?>" rel="stylesheet">
-    <link href="<?php echo relativePath('js/mmenu/mmenu-light.css') ?>" rel="stylesheet">
     <?php if (!$raspberry): ?>
         <meta name="format-detection" content="telephone=no">
         <meta name="viewport" content="width=1024, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
@@ -73,6 +73,7 @@ function relativePath($p)
 <div id="loader"></div>
 <div id="mask"></div>
 <header>
+    <a href="#openmenu" id="burger"><i class="fa fa-bars"></i></a>
     <?php echo makeNav($nav) ?>
 </header>
 <div id="scrollholder">
@@ -81,7 +82,7 @@ function relativePath($p)
     </main>
 </div>
 <?php
-if (true) {
+if ($android) {
     echo '<script src="' . relativePath('js/webapp.js') . '"></script>' . "\n";
 } ?>
 <script>
diff --git a/js/home.js b/js/home.js
index 2de4c3d..fde3b57 100644
--- a/js/home.js
+++ b/js/home.js
@@ -21,23 +21,6 @@ var videoPlaying = false;
 var lastOffScreen = 0;
 var maskRemoteShort = false;
 
-document.addEventListener(
-    "DOMContentLoaded", () => {
-        const menu = new MmenuLight(
-            document.querySelector( "#mainnav" )
-        );
-
-        const navigator = menu.navigation();
-        const drawer = menu.offcanvas();
-
-        document.querySelector( 'a[href="#my-menu"]' )
-            .addEventListener( 'click', ( evnt ) => {
-                evnt.preventDefault();
-                drawer.open();
-            });
-    }
-);
-
 $(function () {
 
     var clicktouchevent = 'click';
@@ -69,6 +52,19 @@ $(function () {
         runSSHQueue();
     }, 1500);
 
+    menu = new MmenuLight(
+        document.querySelector("#mainnav")
+    );
+
+    menunav = menu.navigation({theme: 'dark', title: ''});
+    menudrawer = menu.offcanvas();
+
+    document.querySelector('a[href="#openmenu"]')
+        .addEventListener('click', function (evnt) {
+            evnt.preventDefault();
+            menudrawer.open();
+        });
+
     $("body").mousewheel(function (event, delta) {
         $("#scrollholder").get(0).scrollLeft -= (delta * 60);
         event.preventDefault();
@@ -141,7 +137,8 @@ $(function () {
         return false;
     });
 
-    $(document).on(clicktouchevent, 'a[data-menu]', function () {
+    $(document).on(clicktouchevent, '[data-menu]', function () {
+        console.log('!!!!');
         $("#iframeHolder").hide();
         window.location.hash = "#/section/" + $(this).data('menu');
         return false;
@@ -424,6 +421,7 @@ function changeAddress() {
     console.log('hashchange ' + a);
     var args = a.split('/');
     args.shift();
+    menudrawer.close();
     if (args.length == 0 || args[0] == '') {
         showSection('home');
     } else if (args[0] == 'section') {
@@ -672,9 +670,10 @@ function updateTraffic(force) {
         t.attr('data-init', '1');
         resize();
         hideLoader();
-    }).fail(function(){
+    }).fail(function () {
         hideLoader();
-    });;
+    });
+    ;
 }
 
 function updateVelib(force) {
@@ -700,7 +699,7 @@ function updateVelib(force) {
         v.attr('data-init', '1');
         resize();
         hideLoader();
-    }).fail(function(){
+    }).fail(function () {
         hideLoader();
     });
 }
@@ -722,7 +721,7 @@ function updateWeather() {
         w.find('.temp').text(data.outdoor_temp + '°C');
         w.attr('data-init', 1);
         resize();
-    }).fail(function(){
+    }).fail(function () {
         hideLoader();
     });
 }
@@ -782,7 +781,7 @@ function refreshSections(callback) {
         if (callback !== undefined) {
             callback();
         }
-    }).fail(function(){
+    }).fail(function () {
         if (callback !== undefined) {
             callback();
         }
@@ -839,7 +838,7 @@ function resize() {
     // Resize bar
     var nbicons = $("header a").length;
     var fz = hh / nbicons / 1.58;
-    $("header").css('fontSize', fz);
+    // $("header").css('fontSize', fz);
 
     var baseCellWidth = 6.4;
     var baseCellHeight = 6.4;
@@ -847,23 +846,17 @@ function resize() {
         baseCellWidth = 4.4;
     }
 
-    var left = fz * 1.2;
-    var scrollWidth = ww - left;
-
     var perRow = 2;
     var s = (hh) / perRow / baseCellHeight;
     $("section").css('fontSize', s);
-    var minWidth = scrollWidth;
     if ($('section:visible .col').length > 0) {
-        minWidth = baseCellWidth * s * $('section:visible .col').length + 40;
+        var minWidth = baseCellWidth * s * $('section:visible .col').length + 40;
     }
     $("main").css({
         height: hh,
         minWidth: minWidth
     });
 
-
-    $("#scrollholder").css({width: scrollWidth, height: hh, left: left});
     $("#iframeHolder").css({left: fz * 1.3, width: ww - fz * 1.3});
 
     $("section:visible .col > *").each(function () {
diff --git a/js/mmenu/mmenu-light.js b/js/mmenu/mmenu-light.js
index 6fda685..aa50339 100644
--- a/js/mmenu/mmenu-light.js
+++ b/js/mmenu/mmenu-light.js
@@ -1 +1,162 @@
-!function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);var i=function(){function t(t){var e=this;this.listener=function(t){(t.matches?e.matchFns:e.unmatchFns).forEach((function(t){t()}))},this.toggler=window.matchMedia(t),this.toggler.addListener(this.listener),this.matchFns=[],this.unmatchFns=[]}return t.prototype.add=function(t,e){this.matchFns.push(t),this.unmatchFns.push(e),(this.toggler.matches?t:e)()},t}(),s=function(t){return Array.prototype.slice.call(t)},o=function(t,e){return s((e||document).querySelectorAll(t))},r=("ontouchstart"in window||navigator.msMaxTouchPoints,navigator.userAgent.indexOf("MSIE")>-1||navigator.appVersion.indexOf("Trident/")>-1),a="mm-spn",c=function(){function t(t,e,n,i,s){this.node=t,this.title=e,this.slidingSubmenus=i,this.selectedClass=n,this.node.classList.add(a),r&&(this.slidingSubmenus=!1),this.node.classList.add(a+"--"+s),this.node.classList.add(a+"--"+(this.slidingSubmenus?"navbar":"vertical")),this._setSelectedl(),this._initAnchors()}return Object.defineProperty(t.prototype,"prefix",{get:function(){return a},enumerable:!1,configurable:!0}),t.prototype.openPanel=function(t){var e=t.parentElement;if(this.slidingSubmenus){var n=t.dataset.mmSpnTitle;e===this.node?this.node.classList.add(a+"--main"):(this.node.classList.remove(a+"--main"),n||s(e.children).forEach((function(t){t.matches("a, span")&&(n=t.textContent)}))),n||(n=this.title),this.node.dataset.mmSpnTitle=n,o("."+a+"--open",this.node).forEach((function(t){t.classList.remove(a+"--open"),t.classList.remove(a+"--parent")})),t.classList.add(a+"--open"),t.classList.remove(a+"--parent");for(var i=t.parentElement.closest("ul");i;)i.classList.add(a+"--open"),i.classList.add(a+"--parent"),i=i.parentElement.closest("ul")}else{var r=t.matches("."+a+"--open");o("."+a+"--open",this.node).forEach((function(t){t.classList.remove(a+"--open")})),t.classList[r?"remove":"add"](a+"--open");for(var c=t.parentElement.closest("ul");c;)c.classList.add(a+"--open"),c=c.parentElement.closest("ul")}},t.prototype._setSelectedl=function(){var t=o("."+this.selectedClass,this.node),e=t[t.length-1],n=null;e&&(n=e.closest("ul")),n||(n=this.node.querySelector("ul")),this.openPanel(n)},t.prototype._initAnchors=function(){var t=this;this.node.addEventListener("click",(function(e){var n=e.target,i=!1;(i=(i=(i=i||function(t){return!!t.matches("a")}(n))||function(e){var n;return!!(n=e.closest("span")?e.parentElement:!!e.closest("li")&&e)&&(s(n.children).forEach((function(e){e.matches("ul")&&t.openPanel(e)})),!0)}(n))||function(e){var n=o("."+a+"--open",e),i=n[n.length-1];if(i){var s=i.parentElement.closest("ul");if(s)return t.openPanel(s),!0}return!1}(n))&&e.stopImmediatePropagation()}))},t}(),d="mm-ocd",u=function(){function t(t,e){var n=this;void 0===t&&(t=null),this.wrapper=document.createElement("div"),this.wrapper.classList.add(""+d),this.wrapper.classList.add(d+"--"+e),this.content=document.createElement("div"),this.content.classList.add(d+"__content"),this.wrapper.append(this.content),this.backdrop=document.createElement("div"),this.backdrop.classList.add(d+"__backdrop"),this.wrapper.append(this.backdrop),document.body.append(this.wrapper),t&&this.content.append(t);var i=function(t){n.close(),t.stopImmediatePropagation()};this.backdrop.addEventListener("touchstart",i,{passive:!0}),this.backdrop.addEventListener("mousedown",i,{passive:!0})}return Object.defineProperty(t.prototype,"prefix",{get:function(){return d},enumerable:!1,configurable:!0}),t.prototype.open=function(){this.wrapper.classList.add(d+"--open"),document.body.classList.add(d+"-opened")},t.prototype.close=function(){this.wrapper.classList.remove(d+"--open"),document.body.classList.remove(d+"-opened")},t}(),l=function(){function t(t,e){void 0===e&&(e="all"),this.menu=t,this.toggler=new i(e)}return t.prototype.navigation=function(t){var e=this;if(!this.navigator){var n=(t=t||{}).title,i=void 0===n?"Menu":n,s=t.selectedClass,o=void 0===s?"Selected":s,r=t.slidingSubmenus,a=void 0===r||r,d=t.theme,u=void 0===d?"light":d;this.navigator=new c(this.menu,i,o,a,u),this.toggler.add((function(){return e.menu.classList.add(e.navigator.prefix)}),(function(){return e.menu.classList.remove(e.navigator.prefix)}))}return this.navigator},t.prototype.offcanvas=function(t){var e=this;if(!this.drawer){var n=(t=t||{}).position,i=void 0===n?"left":n;this.drawer=new u(null,i);var s=document.createComment("original menu location");this.menu.after(s),this.toggler.add((function(){e.drawer.content.append(e.menu)}),(function(){e.drawer.close(),s.after(e.menu)}))}return this.drawer},t}();e.default=l;window.MmenuLight=l}]);
\ No newline at end of file
+!function (t) {
+    var e = {};
+
+    function n(i) {
+        if (e[i]) return e[i].exports;
+        var s = e[i] = {i: i, l: !1, exports: {}};
+        return t[i].call(s.exports, s, s.exports, n), s.l = !0, s.exports
+    }
+
+    n.m = t, n.c = e, n.d = function (t, e, i) {
+        n.o(t, e) || Object.defineProperty(t, e, {enumerable: !0, get: i})
+    }, n.r = function (t) {
+        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(t, "__esModule", {value: !0})
+    }, n.t = function (t, e) {
+        if (1 & e && (t = n(t)), 8 & e) return t;
+        if (4 & e && "object" == typeof t && t && t.__esModule) return t;
+        var i = Object.create(null);
+        if (n.r(i), Object.defineProperty(i, "default", {
+            enumerable: !0,
+            value: t
+        }), 2 & e && "string" != typeof t) for (var s in t) n.d(i, s, function (e) {
+            return t[e]
+        }.bind(null, s));
+        return i
+    }, n.n = function (t) {
+        var e = t && t.__esModule ? function () {
+            return t.default
+        } : function () {
+            return t
+        };
+        return n.d(e, "a", e), e
+    }, n.o = function (t, e) {
+        return Object.prototype.hasOwnProperty.call(t, e)
+    }, n.p = "", n(n.s = 0)
+}([function (t, e, n) {
+    "use strict";
+    n.r(e);
+    var i = function () {
+            function t(t) {
+                var e = this;
+                this.listener = function (t) {
+                    (t.matches ? e.matchFns : e.unmatchFns).forEach((function (t) {
+                        t()
+                    }))
+                }, this.toggler = window.matchMedia(t), this.toggler.addListener(this.listener), this.matchFns = [], this.unmatchFns = []
+            }
+
+            return t.prototype.add = function (t, e) {
+                this.matchFns.push(t), this.unmatchFns.push(e), (this.toggler.matches ? t : e)()
+            }, t
+        }(), s = function (t) {
+            return Array.prototype.slice.call(t)
+        }, o = function (t, e) {
+            return s((e || document).querySelectorAll(t))
+        },
+        r = ("ontouchstart" in window || navigator.msMaxTouchPoints, navigator.userAgent.indexOf("MSIE") > -1 || navigator.appVersion.indexOf("Trident/") > -1),
+        a = "mm-spn", c = function () {
+            function t(t, e, n, i, s) {
+                this.node = t, this.title = e, this.slidingSubmenus = i, this.selectedClass = n, this.node.classList.add(a), r && (this.slidingSubmenus = !1), this.node.classList.add(a + "--" + s), this.node.classList.add(a + "--" + (this.slidingSubmenus ? "navbar" : "vertical")), this._setSelectedl(), this._initAnchors()
+            }
+
+            return Object.defineProperty(t.prototype, "prefix", {
+                get: function () {
+                    return a
+                }, enumerable: !1, configurable: !0
+            }), t.prototype.openPanel = function (t) {
+                var e = t.parentElement;
+                if (this.slidingSubmenus) {
+                    var n = t.dataset.mmSpnTitle;
+                    e === this.node ? this.node.classList.add(a + "--main") : (this.node.classList.remove(a + "--main"), n || s(e.children).forEach((function (t) {
+                        t.matches("a, span") && (n = t.textContent)
+                    }))), n || (n = this.title), this.node.dataset.mmSpnTitle = n, o("." + a + "--open", this.node).forEach((function (t) {
+                        t.classList.remove(a + "--open"), t.classList.remove(a + "--parent")
+                    })), t.classList.add(a + "--open"), t.classList.remove(a + "--parent");
+                    for (var i = t.parentElement.closest("ul"); i;) i.classList.add(a + "--open"), i.classList.add(a + "--parent"), i = i.parentElement.closest("ul")
+                } else {
+                    var r = t.matches("." + a + "--open");
+                    o("." + a + "--open", this.node).forEach((function (t) {
+                        t.classList.remove(a + "--open")
+                    })), t.classList[r ? "remove" : "add"](a + "--open");
+                    for (var c = t.parentElement.closest("ul"); c;) c.classList.add(a + "--open"), c = c.parentElement.closest("ul")
+                }
+            }, t.prototype._setSelectedl = function () {
+                var t = o("." + this.selectedClass, this.node), e = t[t.length - 1], n = null;
+                e && (n = e.closest("ul")), n || (n = this.node.querySelector("ul")), this.openPanel(n)
+            }, t.prototype._initAnchors = function () {
+                return;
+                var t = this;
+                this.node.addEventListener("click", (function (e) {
+                    var n = e.target, i = !1;
+                    (i = (i = (i = i || function (t) {
+                        return !!t.matches("a")
+                    }(n)) || function (e) {
+                        var n;
+                        return !!(n = e.closest("span") ? e.parentElement : !!e.closest("li") && e) && (s(n.children).forEach((function (e) {
+                            e.matches("ul") && t.openPanel(e)
+                        })), !0)
+                    }(n)) || function (e) {
+                        var n = o("." + a + "--open", e), i = n[n.length - 1];
+                        if (i) {
+                            var s = i.parentElement.closest("ul");
+                            if (s) return t.openPanel(s), !0
+                        }
+                        return !1
+                    }(n)) && e.stopImmediatePropagation()
+                }))
+            }, t
+        }(), d = "mm-ocd", u = function () {
+            function t(t, e) {
+                var n = this;
+                void 0 === t && (t = null), this.wrapper = document.createElement("div"), this.wrapper.classList.add("" + d), this.wrapper.classList.add(d + "--" + e), this.content = document.createElement("div"), this.content.classList.add(d + "__content"), this.wrapper.append(this.content), this.backdrop = document.createElement("div"), this.backdrop.classList.add(d + "__backdrop"), this.wrapper.append(this.backdrop), document.body.append(this.wrapper), t && this.content.append(t);
+                var i = function (t) {
+                    n.close(), t.stopImmediatePropagation()
+                };
+                this.backdrop.addEventListener("touchstart", i, {passive: !0}), this.backdrop.addEventListener("mousedown", i, {passive: !0})
+            }
+
+            return Object.defineProperty(t.prototype, "prefix", {
+                get: function () {
+                    return d
+                }, enumerable: !1, configurable: !0
+            }), t.prototype.open = function () {
+                this.wrapper.classList.add(d + "--open"), document.body.classList.add(d + "-opened")
+            }, t.prototype.close = function () {
+                this.wrapper.classList.remove(d + "--open"), document.body.classList.remove(d + "-opened")
+            }, t
+        }(), l = function () {
+            function t(t, e) {
+                void 0 === e && (e = "all"), this.menu = t, this.toggler = new i(e)
+            }
+
+            return t.prototype.navigation = function (t) {
+                var e = this;
+                if (!this.navigator) {
+                    var n = (t = t || {}).title, i = void 0 === n ? "Menu" : n, s = t.selectedClass,
+                        o = void 0 === s ? "Selected" : s, r = t.slidingSubmenus, a = void 0 === r || r, d = t.theme,
+                        u = void 0 === d ? "light" : d;
+                    this.navigator = new c(this.menu, i, o, a, u), this.toggler.add((function () {
+                        return e.menu.classList.add(e.navigator.prefix)
+                    }), (function () {
+                        return e.menu.classList.remove(e.navigator.prefix)
+                    }))
+                }
+                return this.navigator
+            }, t.prototype.offcanvas = function (t) {
+                var e = this;
+                if (!this.drawer) {
+                    var n = (t = t || {}).position, i = void 0 === n ? "left" : n;
+                    this.drawer = new u(null, i);
+                    var s = document.createComment("original menu location");
+                    this.menu.after(s), this.toggler.add((function () {
+                        e.drawer.content.append(e.menu)
+                    }), (function () {
+                        e.drawer.close(), s.after(e.menu)
+                    }))
+                }
+                return this.drawer
+            }, t
+        }();
+    e.default = l;
+    window.MmenuLight = l
+}]);
\ No newline at end of file
diff --git a/scripts/lib/lib.php b/scripts/lib/lib.php
index 5f046af..a742e2d 100644
--- a/scripts/lib/lib.php
+++ b/scripts/lib/lib.php
@@ -565,18 +565,18 @@ function toNumber($val, $round = false)
 function makeNav($nav)
 {
     $map = [
-        'home' => '<a href="#" data-menu="home"><i class="fa fa-home" aria-hidden="true"></i></a>',
-        'lights' => '<a href="#" data-menu="lights"><i class="far fa-lightbulb" aria-hidden="true"></i></a>',
-        'music' => '<a href="#" data-menu="music"><i class="fa fa-music" aria-hidden="true"></i></a>',
-        'media' => '<a href="#" data-menu="media"><i class="fa fa-tv-retro" aria-hidden="true"></i></a>',
-        'coffee' => '<a href="#" data-menu="coffee"><i class="fa fa-coffee" aria-hidden="true"></i></a>',
-        'fan' => '<a href="/scripts/light.php?scene=chambre/fan/toggle" class="ajax"><i class="fa fa-fan" aria-hidden="true"></i></a>',
-        'remote' => '<a href="#" data-menu="remote"><i class="fa fa-play" aria-hidden="true"></i></a>',
-        'switch' => '<a href="#" data-menu="switch"><i class="far fa-portal-enter" aria-hidden="true"></i></a>',
-        'clock' => '<a href="#" data-menu="clock"><i class="far fa-alarm-clock" aria-hidden="true"></i></a>',
-        'settings' => '<a href="#" data-menu="settings"><i class="fa fa-cog" aria-hidden="true"></i></a>',
-        'alert' => '<a href="#" data-action="alert"><i class="fa fa-bell" aria-hidden="true"></i></a>',
-        'off' => '<a href="#" data-action="off"><i class="fa fa-power-off" aria-hidden="true"></i></a>',
+        'home' => '<div data-menu="home"><i class="fa fa-home" aria-hidden="true"></i><span>Accueil</span></div>',
+        'lights' => '<div data-menu="lights"><i class="far fa-lightbulb" aria-hidden="true"></i><span>Lumières</span></div>',
+        'music' => '<div data-menu="music"><i class="fa fa-music" aria-hidden="true"></i><span>Musique & Radio</span></div>',
+        'media' => '<div data-menu="media"><i class="fa fa-tv-retro" aria-hidden="true"></i><span>Medias & TV</span></div>',
+        'coffee' => '<div data-menu="coffee"><i class="fa fa-coffee" aria-hidden="true"></i><span>Café</span></div>',
+        'fan' => '<a href="/scripts/light.php?scene=chambre/fan/toggle" class="ajax"><i class="fa fa-fan" aria-hidden="true"></i><span>Ventilateur</span></a>',
+        'remote' => '<div data-menu="remote"><i class="fa fa-play" aria-hidden="true"></i><span>Télécommande</span></div>',
+        'switch' => '<div data-menu="switch"><i class="far fa-portal-enter" aria-hidden="true"></i><span>Changer de pièce</span></div>',
+        'clock' => '<div data-menu="clock"><i class="far fa-alarm-clock" aria-hidden="true"></i><span>Réveil</span></div>',
+        'settings' => '<div data-menu="settings"><i class="fa fa-cog" aria-hidden="true"></i><span>Paramètres</span></div>',
+        'alert' => '<div data-action="alert"><i class="fa fa-bell" aria-hidden="true"></i><span>Alerte</span></div>',
+        'off' => '<div data-action="off"><i class="fa fa-power-off" aria-hidden="true"></i><span>Éteindre</span></div>',
     ];
 
     $res = '<nav id="mainnav"><ul>';
diff --git a/style/menu.less b/style/menu.less
new file mode 100644
index 0000000..c7caa26
--- /dev/null
+++ b/style/menu.less
@@ -0,0 +1,46 @@
+.mm-spn {
+  --mm-ocd-max-width: 440px;
+
+  &.mm-spn--light, &.mm-spn--dark {
+    background-color: #000;
+  }
+
+  &.mm-spn--navbar {
+    ul {
+      top: 30px !important;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  li {
+    display: inline-block;
+    width: 140px;
+    height: 160px;
+
+    &:before, &:after {
+      display: none;
+    }
+
+    span {
+      display: block;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-align: center;
+      padding: 0;
+    }
+
+    i {
+      display: block;
+      width: 100%;
+      font-size: 70px;
+      vertical-align: top;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+  }
+}
+
diff --git a/style/style.css b/style/style.css
index e4b8813..40a1c1e 100644
--- a/style/style.css
+++ b/style/style.css
@@ -44,13 +44,24 @@ body #splash {
   left: 0;
   z-index: 0;
 }
-header {
+#burger {
   position: fixed;
-  left: 0.1em;
-  width: 1em;
-  font-size: 100px;
+  left: -100px;
+  top: -100px;
+  width: 200px;
+  height: 200px;
+  background-color: #000;
+  border-radius: 50% 50%;
+  z-index: 2;
 }
-header a {
+#burger i {
+  position: absolute;
+  color: #fff;
+  right: 45px;
+  bottom: 45px;
+  font-size: 40px;
+}
+#mainnav a {
   text-align: center;
   display: block;
   z-index: 100;
@@ -58,13 +69,13 @@ header a {
   text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
   margin: 0.2em 0;
 }
-header a .fa-tv {
+#mainnav a .fa-tv {
   -webkit-transform: scaleX(0.85);
   transform: scaleX(0.85);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
 }
-header a .fa-coffee {
+#mainnav a .fa-coffee {
   -webkit-transform: scaleX(0.85);
   transform: scaleX(0.85);
   -webkit-transform-origin: 0 0;
@@ -399,6 +410,44 @@ section .col > * span .fa {
   width: 100%;
   height: 100%;
 }
+.mm-spn {
+  --mm-ocd-max-width: 440px;
+}
+.mm-spn.mm-spn--light,
+.mm-spn.mm-spn--dark {
+  background-color: #000;
+}
+.mm-spn.mm-spn--navbar ul {
+  top: 30px !important;
+}
+.mm-spn.mm-spn--navbar ul:before {
+  display: none;
+}
+.mm-spn li {
+  display: inline-block;
+  width: 140px;
+  height: 160px;
+}
+.mm-spn li:before,
+.mm-spn li:after {
+  display: none;
+}
+.mm-spn li span {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  padding: 0;
+}
+.mm-spn li i {
+  display: block;
+  width: 100%;
+  font-size: 70px;
+  vertical-align: top;
+  margin-bottom: 20px;
+  text-align: center;
+}
 .bricks {
   height: 100%;
   width: 100%;
diff --git a/style/style.less b/style/style.less
index f0b4cf4..03a683c 100644
--- a/style/style.less
+++ b/style/style.less
@@ -33,7 +33,7 @@ body {
   top: 0;
   max-width: 100%;
   -webkit-overflow-scrolling: touch;
-  scrollbar-width:thin;
+  scrollbar-width: thin;
 
   &::-webkit-scrollbar {
     width: 0 !important;
@@ -54,11 +54,28 @@ body {
   z-index: 0;
 }
 
-header {
+#burger {
+  @w: 200px;
+  @o: unit(@w/-2, px);
   position: fixed;
-  left: 0.1em;
-  width: 1em;
-  font-size: 100px;
+  left: @o;
+  top: @o;
+  width: @w;
+  height: @w;
+  background-color: #000;
+  border-radius: 50% 50%;
+  z-index: 2;
+
+  i {
+    position: absolute;
+    color: #fff;
+    right: 45px;
+    bottom: 45px;
+    font-size: 40px;
+  }
+}
+
+#mainnav {
 
   a {
     text-align: center;
@@ -495,5 +512,6 @@ section {
   }
 }
 
+@import "menu";
 
 @import "remote";
\ No newline at end of file