Added layer controls

src/App.vue

@@ -2,25 +2,27 @@
 import 'leaflet/dist/leaflet.css'
 import 'vue-leaflet-markercluster/dist/style.css'
 
-import L, { type PointTuple } from 'leaflet'
+import L from 'leaflet'
 globalThis.L = L
 
 import { LMap, LTileLayer, LControlZoom, LLayerGroup } from '@vue-leaflet/vue-leaflet'
 import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
-import { ref } from 'vue'
 
-import ReviewMarker from './components/ReviewMarker.vue'
-import TokenMarker from './components/TokenMarker.vue'
+import ReviewMarker from './components/map/ReviewMarker.vue'
+import TokenMarker from './components/map/TokenMarker.vue'
 
+import { storeToRefs } from 'pinia'
 import { useReviewStore } from './stores/reviews'
 import { useParisTokensStore } from './stores/parisTokens'
+import { useMap } from './stores/map'
+import MapSidebar from './components/map/MapSidebar.vue'
 
-const zoom = ref(7)
-const minZoom = 4
-const center = ref<PointTuple>([47.809376, -0.637207])
+const { zoom, minZoom, center } = useMap()
 
 const { markers: reviews } = useReviewStore()
 const { markers: parisTokens } = useParisTokensStore()
+
+const { activeLayers } = storeToRefs(useMap())
 </script>
 
 <template>
@@ -41,22 +43,26 @@ const { markers: parisTokens } = useParisTokensStore()
       />
 
       <!-- "Monnaie de Paris" CSGroup -->
-      <LLayerGroup v-if="parisTokens.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
+      <LLayerGroup v-if="activeLayers.tokens && parisTokens.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
         <TokenMarker v-once v-for="marker in parisTokens" :key="marker.title" :marker />
       </LLayerGroup>
 
       <!-- Review CSGroup -->
-      <LMarkerClusterGroup v-if="reviews.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
+      <LMarkerClusterGroup v-if="activeLayers.food && reviews.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
         <ReviewMarker v-once v-for="marker in reviews" :key="marker.title" :marker />
       </LMarkerClusterGroup>
     </LMap>
   </main>
+
+  <MapSidebar />
 </template>
 
 <style lang="scss">
 main {
   height: 100vh;
   width: 100vw;
+  position: relative;
+  z-index: 1;
 }
 
 .leaflet-marker-icon:not(.marker-cluster) {