Show/hide sidebar functionality (publiclab#1177)

* proper changes

* proper changes

* up-to-date-two

* create btn for show/hide sidebar

* hotfix

* fixed the dissapearing toggle btn

* implemented show/hide toggle.
>
>
Co-authored-by: segun-codes <adoughdough@yahoo.com>

* toggle show/hide functionailty

* hot-fix

* re-run build

* rebuild dist

* removed dist changes

Co-authored-by: jywarren <jeff@unterbahn.com>

examples/archive.html

@@ -26,7 +26,7 @@
           <div class="modal-header d-block">
             <div class="d-flex justify-content-between align-items-center">
               <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
             </div>
             <p> <small>(while MapKnitter is offline)</small> </p>
           </div>
@@ -50,10 +50,12 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
     </div>
 
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+    <i title="Open Sidebar" id="mapToggle" title="Open Sidebar" class="fa fa-bars fa-3x " style="position: absolute; right: 0; margin: 1rem; z-index: 900; color: white; cursor: pointer;" aria-hidden="true"></i>
 
     <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
       <div class="offcanvas-header">
         <h3 id="offcanvasRightLabel">Images</h3>
+            <i title="Close Sidebar" id="modalToggle" title="Close Sidebar" class=" fa fa-times fa-3x " style="cursor: pointer; position: absolute; right: 0; margin: 1rem; color: #00000070;" aria-hidden="true"></i>
         <button type="button" class="btn btn-primary d-sm-none" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
       </div>
       <hr>
@@ -72,6 +74,8 @@ <h3 id="offcanvasRightLabel">Images</h3>
     let input = document.getElementById('input');
     let responseText = document.getElementById('response');
     let imageContainer = document.getElementById('imgContainer');
+    let modalToggle = document.getElementById('modalToggle')
+    let mapToggle = document.getElementById('mapToggle')
 
     const setupMap = () => {
       map = L.map('map').setView([51.505, -0.09], 13);
@@ -113,25 +117,7 @@ <h3 id="offcanvasRightLabel">Images</h3>
                 fetchedFrom.appendChild(fetchedFromUrl)
 
                 placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
-                placeButton.innerHTML = 'Place on map ';
-
-                placeButton.addEventListener('click', (event) => {
-                  if(!placeButton.getElementsByClassName('fa-spinner')[0]){
-                    const spinner = document.createElement('i')
-                    spinner.setAttribute('class', "fa fa-spinner fa-spin")
-                    spinner.setAttribute('font-family', 'font awesome')
-
-                    placeButton.appendChild(spinner)
-
-                    let imageURL = event.target.previousElementSibling.src;
-                    let image = L.distortableImageOverlay(imageURL);
-                    map.imgGroup.addLayer(image)
-
-                    image.addEventListener('load', () => {
-                      placeButton.removeChild(spinner)
-                    })
-                  }
-                })
+                placeButton.innerHTML = 'Place on map';
 
                 image.src = `${url.replace('metadata', 'download')}/${file.name}`;
 
@@ -156,8 +142,29 @@ <h3 id="offcanvasRightLabel">Images</h3>
     });
 
     welcomeModal.addEventListener('hidden.bs.modal', (event) => {
-      new bootstrap.Offcanvas(sidebar).show();
+        new bootstrap.Offcanvas(sidebar).show();
     });
 
+
+    map.addEventListener('click', (event)=>{
+       sidebar.classList.remove('show')
+    })
+
+    mapToggle.addEventListener('click', (event)=>{
+           new bootstrap.Offcanvas(sidebar).show();
+    })
+    modalToggle.addEventListener('click', (event)=>{
+            if(sidebar.classList.contains('show')){
+              sidebar.classList.remove('show')
+            }
+    })
+
+    document.addEventListener("click", (event) => {
+      if (event.target.classList.contains('place-button')) {
+        let imageURL = event.target.previousElementSibling.src;
+        let image = L.distortableImageOverlay(imageURL);
+        map.imgGroup.addLayer(image);
+      }
+    });
   </script>
-</html>
+</html>