changes

# Conflicts:
#	src/components/LeafletTest.vue

src/components/MenuBar.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useLeafletStore } from 'stores/leaflet';
+import type { coords } from 'src/types';
+import { storeToRefs } from 'pinia';
+
+const leafletStore = useLeafletStore();
+const { center, markerLatLng } = storeToRefs(leafletStore);
+
+const home = {
+  name: 'Home',
+  coords: {
+    lat: 40.71278,
+    lng: -74.00594,
+  },
+  icon: 'home',
+};
+
+const favorites = [
+  {
+    id: 1,
+    name: 'Central Park',
+    coords: {
+      lat: 40.785091,
+      lng: -73.968285,
+    },
+    icon: 'park',
+  },
+  {
+    id: 2,
+    name: 'Times Square',
+    coords: {
+      lat: 40.758896,
+      lng: -73.98513,
+    },
+    icon: 'star',
+  },
+  {
+    id: 3,
+    name: 'Empire State Building',
+    coords: {
+      lat: 40.748817,
+      lng: -73.985428,
+    },
+    icon: 'building',
+  },
+];
+
+function handleFavClick(coords: coords) {
+  center.value = [coords.lat, coords.lng];
+  markerLatLng.value = [coords.lat, coords.lng];
+}
+</script>
+
+<template>
+  <q-toolbar class="bg-primary text-white">
+    <q-btn flat round dense icon="menu" class="q-mr-sm" />
+    <q-separator dark vertical inset />
+    <q-btn stretch flat :icon="home.icon" @click="handleFavClick(home.coords)" />
+
+    <q-space />
+
+    <q-btn-dropdown stretch flat label="Favorites">
+      <q-list>
+        <q-item
+          v-for="fav in favorites"
+          :key="fav.id"
+          clickable
+          v-ripple
+          v-close-popup
+          @click="handleFavClick(fav.coords)"
+        >
+          <q-item-section avatar>
+            <q-avatar :icon="fav.icon" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>{{ fav.name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+  </q-toolbar>
+</template>
+
+<style scoped></style>