npmx.dev/app/components/AppFooter.vue at 2a8f9fb53eba4ee30e0eeac9961b52b755af2a64 · userquin/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
<script setup lang="ts">
const route = useRoute()
const isHome = computed(() => route.name === 'index')
</script>

<template>
  <footer class="border-t border-border mt-auto">
    <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
      <div
        class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-baseline justify-between gap-2 sm:gap-4"
      >
        <div>
          <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
          <BuildEnvironment v-if="!isHome" footer />
        </div>
        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
        <div class="hidden sm:flex items-center gap-6">
          <NuxtLink :to="{ name: 'about' }" class="link-subtle font-mono text-xs flex items-center">
            {{ $t('footer.about') }}
          </NuxtLink>
          <NuxtLink
            :to="{ name: 'privacy' }"
            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
          >
            {{ $t('privacy_policy.title') }}
          </NuxtLink>
          <NuxtLink
            :to="{ name: 'accessibility' }"
            :title="$t('a11y.title')"
            class="link-subtle font-mono text-xs flex items-center"
          >
            {{ $t('a11y.footer_title') }}
          </NuxtLink>
          <a
            href="https://docs.npmx.dev"
            target="_blank"
            rel="noopener noreferrer"
            class="link-subtle font-mono text-xs flex items-center gap-1"
          >
            {{ $t('footer.docs') }}
            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
          </a>
          <a
            href="https://repo.npmx.dev"
            target="_blank"
            rel="noopener noreferrer"
            class="link-subtle font-mono text-xs flex items-center gap-1"
          >
            {{ $t('footer.source') }}
            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
          </a>
          <a
            href="https://social.npmx.dev"
            target="_blank"
            rel="noopener noreferrer"
            class="link-subtle font-mono text-xs flex items-center gap-1"
          >
            {{ $t('footer.social') }}
            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
          </a>
          <a
            href="https://chat.npmx.dev"
            target="_blank"
            rel="noopener noreferrer"
            class="link-subtle font-mono text-xs flex items-center gap-1"
          >
            {{ $t('footer.chat') }}
            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
          </a>
        </div>
      </div>
      <p class="text-xs text-fg-muted text-center sm:text-start m-0">
        <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
        <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
      </p>
    </div>
  </footer>
</template>