84 lines
3.8 KiB
Vue
84 lines
3.8 KiB
Vue
<script lang="ts" setup>
|
|
import { useMap } from '@/stores/map';
|
|
import { useParisTokensStore } from '@/stores/parisTokens';
|
|
import { useReviewStore } from '@/stores/reviews';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const { activeLayers } = storeToRefs(useMap())
|
|
const { markers: restaurants } = useReviewStore()
|
|
const { markers: tokens } = useParisTokensStore()
|
|
|
|
function handleTokenClick() {
|
|
activeLayers.value.tokens = !activeLayers.value.tokens
|
|
}
|
|
|
|
function handleFoodClick() {
|
|
activeLayers.value.food = !activeLayers.value.food
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="rounded bg-background border border-border shadow-sm">
|
|
<header class="py-1.5 px-2 text-[.8em] font-medium border-b border-border">
|
|
<h2>
|
|
Calques
|
|
</h2>
|
|
</header>
|
|
<menu class="first:pt-0.5 last:pb-0.5">
|
|
<li>
|
|
<button
|
|
class="w-full pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
|
|
:class="{
|
|
'text-foreground *:fill-foreground': !activeLayers.food,
|
|
'text-emerald-600 *:fill-emerald-600': activeLayers.food
|
|
}"
|
|
@click="handleFoodClick"
|
|
>
|
|
<svg v-if="activeLayers.food" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
|
|
<path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-34.34,77.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" />
|
|
</svg>
|
|
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
|
|
<path d="M216,40V224a8,8,0,0,1-16,0V176H152a8,8,0,0,1-8-8,268.75,268.75,0,0,1,7.22-56.88c9.78-40.49,28.32-67.63,53.63-78.47A8,8,0,0,1,216,40Zm-96.11-1.31a8,8,0,1,0-15.78,2.63L111.89,88H88V40a8,8,0,0,0-16,0V88H48.11l7.78-46.68a8,8,0,1,0-15.78-2.63l-8,48A8.17,8.17,0,0,0,32,88a48.07,48.07,0,0,0,40,47.32V224a8,8,0,0,0,16,0V135.32A48.07,48.07,0,0,0,128,88a8.17,8.17,0,0,0-.11-1.31Z" />
|
|
</svg>
|
|
|
|
<span>
|
|
Restaurants <small>({{ restaurants.length }})</small>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
class="pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
|
|
:class="{
|
|
'text-foreground *:fill-foreground': !activeLayers.tokens,
|
|
'text-emerald-600 *:fill-emerald-600': activeLayers.tokens
|
|
}"
|
|
@click="handleTokenClick"
|
|
>
|
|
<svg v-if="activeLayers.tokens" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
|
|
<path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-34.34,77.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" />
|
|
</svg>
|
|
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
|
|
<path d="M198.51,56.09C186.44,35.4,169.92,24,152,24H104C86.08,24,69.56,35.4,57.49,56.09,46.21,75.42,40,101,40,128s6.21,52.58,17.49,71.91C69.56,220.6,86.08,232,104,232h48c17.92,0,34.44-11.4,46.51-32.09C209.79,180.58,216,155,216,128S209.79,75.42,198.51,56.09ZM199.79,120h-32a152.78,152.78,0,0,0-9.68-48H188.7C194.82,85.38,198.86,102,199.79,120Zm-20.6-64H150.46a83.13,83.13,0,0,0-12-16H152C162,40,171.4,46,179.19,56ZM152,216H138.49a83.13,83.13,0,0,0,12-16h28.73C171.4,210,162,216,152,216Zm36.7-32H158.12a152.78,152.78,0,0,0,9.68-48h32C198.86,154,194.82,170.62,188.7,184Z" />
|
|
</svg>
|
|
|
|
<span>
|
|
Monnaie de Paris <small>({{ tokens.length }})</small>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</menu>
|
|
</aside>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
aside {
|
|
position: fixed;
|
|
top: var(--body-padding);
|
|
left: var(--body-padding);
|
|
z-index: 100;
|
|
}
|
|
</style>
|