43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
// Mobile only: the note list, pulled down from the top. Tap or pull the bar at the top edge to open it;
|
|
// push it back up, tap outside or pick a note to close it.
|
|
const { drawerOpen } = useNotesSidebar()
|
|
|
|
const PULL_DISTANCE_PX = 24
|
|
let startY: number | null = null
|
|
|
|
function onTouchStart(event: TouchEvent) {
|
|
startY = event.touches[0]?.clientY ?? null
|
|
}
|
|
|
|
function onTouchMove(event: TouchEvent) {
|
|
const y = event.touches[0]?.clientY
|
|
if (startY === null || y === undefined) return
|
|
if (y - startY > PULL_DISTANCE_PX) {
|
|
drawerOpen.value = true
|
|
startY = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="md:hidden">
|
|
<button
|
|
type="button"
|
|
aria-label="Show notes"
|
|
class="fixed inset-x-0 top-0 z-30 flex h-7 touch-none items-start justify-center pt-2"
|
|
@click="drawerOpen = true"
|
|
@touchstart.passive="onTouchStart"
|
|
@touchmove.passive="onTouchMove"
|
|
>
|
|
<span class="h-1.5 w-12 rounded-full bg-accented" />
|
|
</button>
|
|
|
|
<UDrawer v-model:open="drawerOpen" direction="top" title="Notes" :ui="{ content: 'max-h-[85dvh]', body: 'overflow-y-auto p-0 sm:p-0' }">
|
|
<template #body>
|
|
<NotesList />
|
|
</template>
|
|
</UDrawer>
|
|
</div>
|
|
</template>
|