diff --git a/index.html b/index.html index 8b7b892..74b18b3 100644 --- a/index.html +++ b/index.html @@ -88,6 +88,9 @@
+ diff --git a/src/css/layout.css b/src/css/layout.css index 35c2a62..aea90d2 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -508,6 +508,22 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve } @media screen and (max-width:700px){ + body{ + padding-top:50px; + } + .wrapper{ + top: 50px; + } + .sidebar_left{ + position: absolute; + left: -90px; + background: var(--background); + } + .sidebar_left.active{ + box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.75); + left: 0; + z-index: 3; + } .sidebar_right{ position: absolute; height: 100%; @@ -646,20 +662,12 @@ canvas{ background-color: #ddd; } -@media screen and (max-width:700px){ - body{ - padding-top:50px; - } - .wrapper{ - top: 50px; - } -} @media screen and (max-width:550px){ .canvas_wrapper{ margin-left: 0px; } } -@media screen and (max-height: 740px){ +@media screen and (max-height: 690px){ .sidebar_left{ width: 75px; } diff --git a/src/css/menu.css b/src/css/menu.css index 1e6a28d..037bd1b 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -194,12 +194,9 @@ .mobile_menu { display: block; } - .left_mobile_menu { - display: none; - } .main_menu > ul.menu_bar { height: 50px; - padding-left: 0; + padding-left: 50px; padding-right: 50px; } } \ No newline at end of file diff --git a/src/js/core/base-gui.js b/src/js/core/base-gui.js index 19179dd..d373bb0 100644 --- a/src/js/core/base-gui.js +++ b/src/js/core/base-gui.js @@ -200,6 +200,9 @@ class Base_gui_class { }); } + document.getElementById('left_mobile_menu_button').addEventListener('click', function (event) { + document.querySelector('.sidebar_left').classList.toggle('active'); + }); document.getElementById('mobile_menu_button').addEventListener('click', function (event) { document.querySelector('.sidebar_right').classList.toggle('active'); });