From 038dcc0b7a8b590b9b63763c9989533c89c5c6dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= <nicolo.paraciani@cnr.it>
Date: Thu, 13 Jun 2024 18:33:29 +0200
Subject: [PATCH] Add burger + some map responsiveness

---
 css/app.css | 21 ++-------------------
 index.html  | 10 ++++++++--
 js/index.js |  1 +
 js/ui.js    |  8 ++++++++
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/css/app.css b/css/app.css
index b982113..bf91ca5 100644
--- a/css/app.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 5f35856..b52641e 100644
--- a/index.html
+++ b/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">
diff --git a/js/index.js b/js/index.js
index 0fd6f5f..7792401 100644
--- a/js/index.js
+++ b/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);
 });
diff --git a/js/ui.js b/js/ui.js
index ca1a9ee..ad25e49 100644
--- a/js/ui.js
+++ b/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