slice sidepanel rework

app.vue

@@ -94,4 +94,22 @@ h5 {
 h6 {
    @apply text-e-base;
 }
+
+::-webkit-scrollbar {
+   width: 10px;
+}
+
+::-webkit-scrollbar-track {
+   background: var(--solid-600);
+   border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb {
+   background: var(--solid-400);
+   border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+   background: var(--solid-300);
+}
 </style>

components/SidePanel.vue

@@ -1,5 +1,37 @@
 <template>
-   <aside class="p-4 w-[40rem]">
-      <slot />
+   <aside>
+      <h1>
+         <span>
+            <slot name="title" />
+         </span>
+         <NuxtLink href="/map">
+            <IconButton color="inherit text-3xl">
+               <XMarkIcon />
+            </IconButton>
+         </NuxtLink>
+      </h1>
+      <section class="overflow-y-scroll pr-2">
+         <slot>
+            <i class="opacity-50">no content yet</i>
+         </slot>
+      </section>
    </aside>
 </template>
+
+<script lang="ts" setup>
+import { XMarkIcon } from '@heroicons/vue/24/solid'
+</script>
+
+<style scoped>
+aside {
+   @apply px-4 grid;
+   grid-template-rows: auto 1fr;
+   width: 40rem;
+   height: calc(100vh - theme(spacing.36));
+
+   h1 {
+      @apply my-2 grid items-center;
+      grid-template-columns: 1fr auto;
+   }
+}
+</style>

components/map/Locations.vue

@@ -8,7 +8,7 @@
          @mouseenter="$emit('mouseenter', it, $event)"
          @contextmenu="menu(it, $event)"
       />
-      <MapAreaMarker v-for="it in result.areas.nodes" :key="it.id" :area="it" />
+      <MapAreaMarker v-for="it in result.areas.nodes" :key="it.id" :area="it" @click="click(it, $event)" />
       <DialogCreateTale
          v-if="selected?.action == 'add-lore'"
          :initial-places="[selected.location.id]"
@@ -19,7 +19,13 @@
 
 <script lang="ts" setup>
 import type { LeafletMouseEvent } from 'leaflet'
-import { MapLocationsDocument, Permission, type MapLocationFragment, type MapPlaceFragment } from '~/graphql/generated'
+import {
+   MapLocationsDocument,
+   Permission,
+   type MapAreaFragment,
+   type MapLocationFragment,
+   type MapPlaceFragment,
+} from '~/graphql/generated'
 
 const router = useRouter()
 
@@ -48,10 +54,13 @@ function menu(location: MapLocationFragment, event: LeafletMouseEvent) {
    })
 }
 
-function click(location: MapPlaceFragment, event: LeafletMouseEvent) {
+function click(location: MapPlaceFragment | MapAreaFragment, event: LeafletMouseEvent) {
    emit('click', location, event)
    if (location.__typename === 'Place') {
-      router.push(`/map/${location.slug}`)
+      router.push(`/map/place/${location.slug}`)
+   }
+   if (location.__typename === 'Area') {
+      router.push(`/map/area/${location.slug}`)
    }
 }
 

pages/map/area/[slug].vue

@@ -0,0 +1,38 @@
+<template>
+   <SidePanel>
+      <template #title>{{ result?.area.name }}</template>
+      <template v-if="result">
+         <StyledPanel v-for="tale of result.area.tales.nodes" :key="tale.id" class="tale">
+            <h3>
+               <NuxtLink class="hover:underline underline-offset-4" :to="`/library/${tale.id}`">
+                  {{ tale.title }}
+                  <InlineIcon> <ArrowTopRightOnSquareIcon class="scale-75" /> </InlineIcon>
+               </NuxtLink>
+            </h3>
+            <MarkdownPreview :value="tale.text" />
+         </StyledPanel>
+      </template>
+      <p v-else>Loading...</p>
+   </SidePanel>
+</template>
+
+<script lang="ts" setup>
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid'
+import { GetAreaDocument } from '~/graphql/generated'
+
+const route = useRoute()
+
+const { result } = useQuery(GetAreaDocument, () => ({
+   slug: route.params.slug as string,
+}))
+
+definePageMeta({
+   layout: 'map',
+})
+</script>
+
+<style scoped>
+.tale:not(:last-child) {
+   @apply mb-4;
+}
+</style>

pages/map/[slug].vue → pages/map/place/[slug].vue

@@ -1,7 +1,10 @@
 <template>
    <SidePanel>
+      <template v-if="result" #title>
+         <img :src="`${ICON_HOST}/icons/${result.place.icon.name}.png`" class="h-[1em] inline-block" />
+         {{ result.place.name }}
+      </template>
       <template v-if="result">
-         <h1>{{ result.place.name }}</h1>
          <StyledPanel v-for="tale of result.place.tales.nodes" :key="tale.id" class="tale">
             <h3>
                <NuxtLink class="hover:underline underline-offset-4" :to="`/library/${tale.id}`">