button to toggle left sidebar

index.html

@@ -88,6 +88,9 @@
 		</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');
 		});