34 lines
1.5 KiB
Svelte
34 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores'
|
|
import { goto } from '$app/navigation'
|
|
import { shopLocations } from '$utils/stores/shop'
|
|
|
|
export let isOver: boolean = false
|
|
|
|
const classes = [
|
|
'shop-locationswitcher',
|
|
isOver && 'is-over',
|
|
$$props.class
|
|
].join(' ').trim()
|
|
|
|
|
|
// Quick location change
|
|
const quickLocationChange = ({ target: { value }}: any) => {
|
|
const newPath = $page.path.split('-')[0] + `-${value}`
|
|
goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
|
|
}
|
|
</script>
|
|
|
|
<dl class={classes}>
|
|
<dt class="text-label">Shop your city</dt>
|
|
<dd>
|
|
<svg width="14" height="17" viewBox="0 0 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 11.18a.52.52 0 0 1-.92 0L3.55 6.05a3.46 3.46 0 1 1 6.19 0L7.1 11.18Zm1.2-6.62c0-.91-.73-1.63-1.65-1.63a1.63 1.63 0 1 0 0 3.26c.92 0 1.65-.72 1.65-1.63Zm-2.88 8.18.03.05-.08 1.1 2.98.95v-3.48l.96-1.8v5.28l2.98-.95-.41-5.65-2.31.84.62-1.14 1.91-.7c.3-.09.52.16.55.46l.61 6c.04.42-.21.8-.61.93l-3.82 1.21-3.96-1.21-4.25 1.21a.54.54 0 0 1-.45-.08.4.4 0 0 1-.17-.38l.95-6.53c.04-.16.15-.3.32-.35l1.78-.57.4.77-1.59.51-.82 5.63 3.4-.97.2-2.76c.47.95.78 1.63.78 1.63Z"/>
|
|
</svg>
|
|
<select on:change={quickLocationChange}>
|
|
{#each $shopLocations as { name, slug }}
|
|
<option value={slug} selected={slug === $page.params.name}>{name}</option>
|
|
{/each}
|
|
</select>
|
|
</dd>
|
|
</dl> |