button to toggle left sidebar

index.html

@@ -88,6 +88,9 @@ <h2 class="trn">Layers</h2>
  </div>
  </div>
  <div class="mobile_menu">
+ <button class="left_mobile_menu" id="left_mobile_menu_button" type="button">
+ <span class="sr_only">Toggle Menu</span>
+ </button>
  <button class="right_mobile_menu" id="mobile_menu_button" type="button">
  <span class="sr_only">Toggle Menu</span>
  </button>

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;
  }

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;
  }
 }

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');
  });