More CSS improvements and minor refactoring.

1 files changed, 17 insertions, 7 deletions

diff --git a/main.js b/main.js
index b70ff56..3b6d2ec 100644
--- a/main.js
+++ b/main.js
@@ -134,20 +134,30 @@ const map = new Map({
       source: baseMapSource
     }),
   ],
-  target: document.getElementById('map'),
 });
 
+map.setTarget(document.getElementById('map'));
 (function() {
-  const element = document.getElementById('layer-selection-btn');
+  const menu = document.getElementById('map-menu');
+  map.getViewport().append(menu);
   map.addControl(new Control({
-    element: element,
+    element: menu,
   }));
-  element.onclick = function(event) {
-    document.getElementById('layer-selection-panel').classList.toggle('map-panel-hidden');
-    element.classList.toggle('map-panel-expanded');
-  };
+  menu.classList.remove('d-none');
 })();
 
+document.getElementById('layer-selection-btn').onclick = function(event) {
+  const btn = document.getElementById('layer-selection-btn');
+  const panel = document.getElementById('layer-selection-panel');
+  if (btn.ariaExpanded === 'true') {
+    panel.classList.add('d-none');
+    btn.ariaExpanded = 'false';
+  } else {
+    panel.classList.remove('d-none');
+    btn.ariaExpanded = 'true';
+  }
+};
+
 document.getElementById('layer-topowebb_nedtonad').onchange = function(event) {
   const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
   baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer);