Add burger + some map responsiveness

css/app.css

@@ -121,23 +121,6 @@ a:visited {
     padding-right: 33px;
 }
 /* Leaflef map container */
-@media (max-width: 840px) {
-    .map-sm {
-        height: 450px;
-    }
-}
-@media (min-width: 840px) and (max-width: 960px) {
-    .map-sm {
-        height: 600px;
-    }
-}
-@media (min-width: 960px) and (max-width: 1280px) {
-    .map-lg {
-        height: 700px;
-    }
-}
-@media (min-width: 1280px) {
-    .map-lg {
-        height: 800px;
-    }
+#map {
+    height: calc(100vh - 107px);
 }

index.html

@@ -14,9 +14,15 @@
             <span class="navbar-item is-size-3">
                 Carta archeologica di Capri
             </span>
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
         </div>
         <hr class="navbar-divider">
-        <div class="navbar-menu ml-3">
+        <div class="navbar-menu ml-3" id="nav-menu">
             <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
                 <i class="fa fa-list mr-2"></i> Siti indagati
             </button>
@@ -57,7 +63,7 @@
             </aside>
         </div>
         <div class="column is-full">
-            <div id="map" class="map-lg map-sm"></div>
+            <div id="map"></div>
         </div>
     </div>
     <div class="modal">

js/index.js

@@ -7,5 +7,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
     UI.toggleMenu('siti');
+    UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
 });

js/ui.js

@@ -40,6 +40,14 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
     let centerCtr = new L.Control.CenterControl();
     map.addControl(centerCtr);
 }
+UI.toggleBurger = function(burgerClass) {
+	const burger = document.querySelector(`.${burgerClass}`);
+	burger.addEventListener('click', () => {
+		burger.classList.toggle('is-active');
+		const menuId = burger.getAttribute('data-target');
+		document.querySelector(`#${menuId}`).classList.toggle('is-active');
+	});
+}
 /**
  * 
  * @param {string} triggerId The ID of the trigger element