minor: new nav system (#5)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #5

app/components/KestrelMap.vue

@@ -201,6 +201,7 @@ function createMap(initialCenter) {
   updateMarkers()
   updatePoiMarkers()
   updateLiveMarkers()
+  nextTick(() => map.invalidateSize())
 }
 
 function updateMarkers() {
@@ -403,6 +404,8 @@ function initMapWithLocation() {
   )
 }
 
+let resizeObserver = null
+
 onMounted(async () => {
   if (!import.meta.client || typeof document === 'undefined') return
   const [leaflet, offline] = await Promise.all([
@@ -422,6 +425,15 @@ onMounted(async () => {
   leafletRef.value = { L, offlineApi: offline }
   initMapWithLocation()
   document.addEventListener('click', onDocumentClick)
+
+  nextTick(() => {
+    if (mapRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        mapContext.value?.map?.invalidateSize()
+      })
+      resizeObserver.observe(mapRef.value)
+    }
+  })
 })
 
 function onDocumentClick(e) {
@@ -430,6 +442,10 @@ function onDocumentClick(e) {
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocumentClick)
+  if (resizeObserver && mapRef.value) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
   destroyMap()
 })