npmx.dev/app/components/AppHeader.vue at 8511de6df4795a73dc66d7a480773d8fb5c15192 · devdumpling/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
<script setup lang="ts">
withDefaults(
  defineProps<{
    showLogo?: boolean
    showConnector?: boolean
  }>(),
  {
    showLogo: true,
    showConnector: true,
  },
)
</script>

<template>
  <header
    aria-label="Site header"
    class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
  >
    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
      <NuxtLink
        v-if="showLogo"
        to="/"
        aria-label="npmx home"
        class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
      >
        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
      </NuxtLink>
      <!-- Spacer when logo is hidden -->
      <span v-else class="w-1" />

      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
        <li class="flex">
          <NuxtLink
            to="/search"
            class="link-subtle font-mono text-sm inline-flex items-center gap-2"
            aria-keyshortcuts="/"
          >
            search
            <kbd
              class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
              aria-hidden="true"
            >
              /
            </kbd>
          </NuxtLink>
        </li>
        <li v-if="showConnector" class="flex">
          <ConnectorStatus />
        </li>
        <li v-else class="flex">
          <a
            href="https://github.com/npmx-dev/npmx.dev"
            rel="noopener noreferrer"
            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
          >
            <span class="i-carbon-logo-github w-4 h-4" />
            <span class="hidden sm:inline">github</span>
          </a>
        </li>
      </ul>
    </nav>
  </header>
</template>