npmx.dev/app/components/Code/MobileTreeDrawer.vue at 39aca17cf34839a4ba888f9ba4c3921f237af951 · MatteoGabriele/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script setup lang="ts">
import type { RouteNamedMap } from 'vue-router/auto-routes'

defineProps<{
  tree: PackageFileTree[]
  currentPath: string
  baseUrl: string
  baseRoute: Pick<RouteNamedMap['code'], 'params'>
}>()

const isOpen = shallowRef(false)

// Close drawer on navigation
const route = useRoute()
watch(
  () => route.fullPath,
  () => {
    isOpen.value = false
  },
)

const isLocked = useScrollLock(document)
// Prevent body scroll when drawer is open
watch(isOpen, open => (isLocked.value = open))
</script>

<template>
  <!-- Toggle button (mobile only) -->
  <ButtonBase
    variant="primary"
    class="md:hidden fixed bottom-9 inset-ie-4 z-45"
    :aria-label="$t('code.toggle_tree')"
    @click="isOpen = !isOpen"
    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
  />

  <!-- Backdrop -->
  <Transition
    enter-active-class="transition-opacity duration-200"
    enter-from-class="opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="transition-opacity duration-200"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <div v-if="isOpen" class="md:hidden fixed inset-0 z-40 bg-black/50" @click="isOpen = false" />
  </Transition>

  <!-- Drawer -->
  <Transition
    enter-active-class="transition-transform duration-200"
    enter-from-class="-translate-x-full"
    enter-to-class="translate-x-0"
    leave-active-class="transition-transform duration-200"
    leave-from-class="translate-x-0"
    leave-to-class="-translate-x-full"
  >
    <aside
      v-if="isOpen"
      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
    >
      <div
        class="sticky top-0 z-10 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-start"
      >
        <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
        <ButtonBase
          :aria-label="$t('code.close_tree')"
          @click="isOpen = false"
          classicon="i-lucide:x"
        />
      </div>
      <CodeFileTree
        :tree="tree"
        :current-path="currentPath"
        :base-url="baseUrl"
        :base-route="baseRoute"
      />
    </aside>
  </Transition>
</template>