From 7f8174d32b918f06bafbff5c553434e667602786 Mon Sep 17 00:00:00 2001
From: bdbch <dominik@bdbch.com>
Date: Sun, 8 Feb 2026 21:37:00 +0100
Subject: [PATCH 1/5] feat: use navigation builder for desktop and mobile links

---
 app/components/AppHeader.vue                | 154 ++++++++++++++----
 app/components/Header/MobileMenu.client.vue | 165 +++++---------------
 app/types/index.ts                          |   1 +
 app/types/navigation.ts                     |  28 ++++
 4 files changed, 189 insertions(+), 159 deletions(-)
 create mode 100644 app/types/index.ts
 create mode 100644 app/types/navigation.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 01390c82ef..c0574cf410 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LinkBase } from '#components'
+import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -13,6 +14,112 @@ withDefaults(
 
 const { isConnected, npmUser } = useConnector()
 
+const desktopLinks = computed<NavigationConfig>(() => [
+  {
+    name: 'Compare',
+    label: $t('nav.compare'),
+    to: { name: 'compare' },
+    keyshortcut: 'c',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:compare',
+  },
+  {
+    name: 'Settings',
+    label: $t('nav.settings'),
+    to: { name: 'settings' },
+    keyshortcut: ',',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:settings',
+  },
+])
+
+const mobileLinks = computed<NavigationConfigWithGroups>(() => [
+  {
+    name: 'Desktop Links',
+    type: 'group',
+    items: [...desktopLinks.value],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'About & Policies',
+    type: 'group',
+    items: [
+      {
+        name: 'About',
+        label: $t('footer.about'),
+        to: { name: 'about' },
+        keyshortcut: null,
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:information',
+      },
+      {
+        name: 'Privacy Policy',
+        label: $t('privacy_policy.title'),
+        to: { name: 'privacy' },
+        keyshortcut: null,
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:security',
+      },
+    ],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'External Links',
+    type: 'group',
+    label: $t('nav.links'),
+    items: [
+      {
+        name: 'Docs',
+        label: $t('footer.docs'),
+        href: 'https://docs.npmx.dev',
+        target: '_blank',
+        keyshortcut: null,
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:document',
+      },
+      {
+        name: 'Source',
+        label: $t('footer.source'),
+        href: 'https://repo.npmx.dev',
+        target: '_blank',
+        keyshortcut: null,
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:logo-github',
+      },
+      {
+        name: 'Social',
+        label: $t('footer.social'),
+        href: 'https://social.npmx.dev',
+        target: '_blank',
+        keyshortcut: null,
+        type: 'link',
+        external: true,
+        iconClass: 'i-simple-icons:bluesky',
+      },
+      {
+        name: 'Chat',
+        label: $t('footer.chat'),
+        href: 'https://chat.npmx.dev',
+        target: '_blank',
+        keyshortcut: null,
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:chat',
+      },
+    ],
+  },
+])
+
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
@@ -63,23 +170,18 @@ function handleSearchFocus() {
 }
 
 onKeyStroke(
-  e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
   e => {
-    e.preventDefault()
-    navigateTo({ name: 'settings' })
-  },
-  { dedupe: true },
-)
+    if (isEditableElement(e.target)) {
+      return
+    }
 
-onKeyStroke(
-  e =>
-    isKeyWithoutModifiers(e, 'c') &&
-    !isEditableElement(e.target) &&
-    // Allow more specific handlers to take precedence
-    !e.defaultPrevented,
-  e => {
-    e.preventDefault()
-    navigateTo({ name: 'compare' })
+    for (const link of desktopLinks.value) {
+      if (isKeyWithoutModifiers(e, link.keyshortcut)) {
+        e.preventDefault()
+        navigateTo(link.to.name)
+        break
+      }
+    }
   },
   { dedupe: true },
 )
@@ -152,24 +254,16 @@ onKeyStroke(
 
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="hidden sm:flex flex-shrink-0">
-        <!-- Desktop: Compare link -->
-        <LinkBase
-          class="border-none"
-          variant="button-secondary"
-          :to="{ name: 'compare' }"
-          keyshortcut="c"
-        >
-          {{ $t('nav.compare') }}
-        </LinkBase>
-
-        <!-- Desktop: Settings link -->
+        <!-- Desktop: Explore link -->
         <LinkBase
+          v-for="link in desktopLinks"
+          :key="link.name"
           class="border-none"
           variant="button-secondary"
-          :to="{ name: 'settings' }"
-          keyshortcut=","
+          :to="link.to"
+          :keyshortcut="link.keyshortcut"
         >
-          {{ $t('nav.settings') }}
+          {{ link.label }}
         </LinkBase>
 
         <HeaderAccountMenu />
@@ -187,6 +281,6 @@ onKeyStroke(
     </nav>
 
     <!-- Mobile menu -->
-    <HeaderMobileMenu v-model:open="showMobileMenu" />
+    <HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
   </header>
 </template>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index d653b1e811..f5a8ea5e2f 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -3,6 +3,9 @@ import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 
 const isOpen = defineModel<boolean>('open', { default: false })
+const { links } = defineProps<{
+  links: NavigationConfigWithGroups
+}>()
 
 const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
 const { user: atprotoUser } = useAtproto()
@@ -175,137 +178,41 @@ onUnmounted(deactivate)
 
             <!-- Navigation links -->
             <div class="flex-1 overflow-y-auto overscroll-contain py-2">
-              <!-- App navigation -->
-              <div class="px-2 py-2">
-                <NuxtLink
-                  :to="{ name: 'compare' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
-                >
-                  <span class="i-carbon:compare w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('nav.compare') }}
-                </NuxtLink>
-
-                <NuxtLink
-                  :to="{ name: 'settings' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
-                >
-                  <span class="i-carbon:settings w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('nav.settings') }}
-                </NuxtLink>
-
-                <!-- Connected user links -->
-                <template v-if="isConnected && npmUser">
-                  <NuxtLink
-                    :to="{ name: '~username', params: { username: npmUser } }"
-                    class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                    @click="closeMenu"
-                  >
-                    <span class="i-carbon:package w-5 h-5 text-fg-muted" aria-hidden="true" />
-                    {{ $t('header.packages') }}
-                  </NuxtLink>
-
-                  <NuxtLink
-                    :to="{ name: '~username-orgs', params: { username: npmUser } }"
-                    class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                    @click="closeMenu"
-                  >
-                    <span class="i-carbon:enterprise w-5 h-5 text-fg-muted" aria-hidden="true" />
-                    {{ $t('header.orgs') }}
-                  </NuxtLink>
-                </template>
-              </div>
-
-              <!-- Divider -->
-              <div class="mx-4 my-2 border-t border-border" />
-
-              <!-- Informational links -->
-              <div class="px-2 py-2">
-                <NuxtLink
-                  :to="{ name: 'about' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
-                >
-                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.about') }}
-                </NuxtLink>
-
-                <NuxtLink
-                  :to="{ name: 'privacy' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
-                >
-                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('privacy_policy.title') }}
-                </NuxtLink>
-              </div>
-
-              <!-- Divider -->
-              <div class="mx-4 my-2 border-t border-border" />
+              <template v-for="group in links">
+                <div v-if="group.type === 'separator'" class="mx-4 my-2 border-t border-border" />
 
-              <!-- External links -->
-              <div class="px-2 py-2">
-                <span class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider">
-                  {{ $t('nav.links') }}
-                </span>
-
-                <a
-                  href="https://docs.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                >
-                  <span class="i-carbon:document w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.docs') }}
+                <div v-if="group.type === 'group'" :key="group.name" class="p-2">
                   <span
-                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
-                    aria-hidden="true"
-                  />
-                </a>
-
-                <a
-                  href="https://repo.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                >
-                  <span class="i-carbon:logo-github w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.source') }}
-                  <span
-                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
-                    aria-hidden="true"
-                  />
-                </a>
-
-                <a
-                  href="https://social.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                >
-                  <span class="i-simple-icons:bluesky w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.social') }}
-                  <span
-                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
-                    aria-hidden="true"
-                  />
-                </a>
-
-                <a
-                  href="https://chat.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                >
-                  <span class="i-carbon:chat w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.chat') }}
-                  <span
-                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
-                    aria-hidden="true"
-                  />
-                </a>
-              </div>
+                    v-if="group.label"
+                    class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider"
+                  >
+                    {{ group.label }}
+                  </span>
+                  <div>
+                    <NuxtLink
+                      v-for="link in group.items"
+                      :key="link.name"
+                      :to="link.to"
+                      :href="link.href"
+                      :target="link.target"
+                      class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                      @click="link?.to && closeMenu"
+                    >
+                      <span
+                        :class="link.iconClass"
+                        class="w-5 h-5 text-fg-muted"
+                        aria-hidden="true"
+                      />
+                      {{ link.label }}
+                      <span
+                        v-if="link.external"
+                        class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                        aria-hidden="true"
+                      />
+                    </NuxtLink>
+                  </div>
+                </div>
+              </template>
             </div>
           </nav>
         </Transition>
diff --git a/app/types/index.ts b/app/types/index.ts
new file mode 100644
index 0000000000..9c8479a492
--- /dev/null
+++ b/app/types/index.ts
@@ -0,0 +1 @@
+export * from './navigation'
diff --git a/app/types/navigation.ts b/app/types/navigation.ts
new file mode 100644
index 0000000000..11ff0b613e
--- /dev/null
+++ b/app/types/navigation.ts
@@ -0,0 +1,28 @@
+export type NavigationLink = {
+  name: string
+  label: string
+  iconClass?: string
+  to?: {
+    name?: string
+  }
+  href?: string
+  target?: string
+  keyshortcut?: string
+  type: 'link'
+  external?: boolean
+}
+
+export type NavigationSeparator = {
+  type: 'separator'
+}
+
+export type NavigationConfig = NavigationLink[]
+
+export type NavigationGroup = {
+  name: string
+  type: 'group'
+  label?: string
+  items: NavigationConfig
+}
+
+export type NavigationConfigWithGroups = Array<NavigationGroup | NavigationSeparator>

From 80379748b05026fc4344fb594ae4eb7a260d9b89 Mon Sep 17 00:00:00 2001
From: bdbch <dominik@bdbch.com>
Date: Sun, 8 Feb 2026 23:11:44 +0100
Subject: [PATCH 2/5] fix typing issues & add guards for potential undefined
 types

---
 app/components/AppHeader.vue                |  8 +-------
 app/components/Header/MobileMenu.client.vue | 11 ++++++++---
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index c0574cf410..d772bc0bcd 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -52,7 +52,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         name: 'About',
         label: $t('footer.about'),
         to: { name: 'about' },
-        keyshortcut: null,
         type: 'link',
         external: false,
         iconClass: 'i-carbon:information',
@@ -61,7 +60,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         name: 'Privacy Policy',
         label: $t('privacy_policy.title'),
         to: { name: 'privacy' },
-        keyshortcut: null,
         type: 'link',
         external: false,
         iconClass: 'i-carbon:security',
@@ -81,7 +79,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         label: $t('footer.docs'),
         href: 'https://docs.npmx.dev',
         target: '_blank',
-        keyshortcut: null,
         type: 'link',
         external: true,
         iconClass: 'i-carbon:document',
@@ -91,7 +88,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         label: $t('footer.source'),
         href: 'https://repo.npmx.dev',
         target: '_blank',
-        keyshortcut: null,
         type: 'link',
         external: true,
         iconClass: 'i-carbon:logo-github',
@@ -101,7 +97,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         label: $t('footer.social'),
         href: 'https://social.npmx.dev',
         target: '_blank',
-        keyshortcut: null,
         type: 'link',
         external: true,
         iconClass: 'i-simple-icons:bluesky',
@@ -111,7 +106,6 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         label: $t('footer.chat'),
         href: 'https://chat.npmx.dev',
         target: '_blank',
-        keyshortcut: null,
         type: 'link',
         external: true,
         iconClass: 'i-carbon:chat',
@@ -176,7 +170,7 @@ onKeyStroke(
     }
 
     for (const link of desktopLinks.value) {
-      if (isKeyWithoutModifiers(e, link.keyshortcut)) {
+      if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
         e.preventDefault()
         navigateTo(link.to.name)
         break
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index f5a8ea5e2f..624f2f4a49 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useAtproto } from '~/composables/atproto/useAtproto'
+import type { NavigationConfigWithGroups } from '~/types'
 
 const isOpen = defineModel<boolean>('open', { default: false })
 const { links } = defineProps<{
@@ -178,8 +179,12 @@ onUnmounted(deactivate)
 
             <!-- Navigation links -->
             <div class="flex-1 overflow-y-auto overscroll-contain py-2">
-              <template v-for="group in links">
-                <div v-if="group.type === 'separator'" class="mx-4 my-2 border-t border-border" />
+              <template v-for="(group, index) in links">
+                <div
+                  v-if="group.type === 'separator'"
+                  :key="`seperator-${index}`"
+                  class="mx-4 my-2 border-t border-border"
+                />
 
                 <div v-if="group.type === 'group'" :key="group.name" class="p-2">
                   <span
@@ -192,7 +197,7 @@ onUnmounted(deactivate)
                     <NuxtLink
                       v-for="link in group.items"
                       :key="link.name"
-                      :to="link.to"
+                      :to="link.to?.name"
                       :href="link.href"
                       :target="link.target"
                       class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"

From ed206bbe25e11627b79fc71548f593eea4106821 Mon Sep 17 00:00:00 2001
From: bdbch <dominik@bdbch.com>
Date: Sun, 8 Feb 2026 23:23:56 +0100
Subject: [PATCH 3/5] Invoke closeMenu on mobile menu link click

---
 app/components/Header/MobileMenu.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 624f2f4a49..4b70ab8151 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -201,7 +201,7 @@ onUnmounted(deactivate)
                       :href="link.href"
                       :target="link.target"
                       class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                      @click="link?.to && closeMenu"
+                      @click="link?.to && closeMenu()"
                     >
                       <span
                         :class="link.iconClass"

From 0fb476ce3d391566a458c278b2ae6cadb4fc735a Mon Sep 17 00:00:00 2001
From: bdbch <dominik@bdbch.com>
Date: Sun, 8 Feb 2026 23:26:32 +0100
Subject: [PATCH 4/5] Pass full NuxtLink 'to' prop in mobile menu

---
 app/components/Header/MobileMenu.client.vue | 2 +-
 app/types/navigation.ts                     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 4b70ab8151..e6a1065c86 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -197,7 +197,7 @@ onUnmounted(deactivate)
                     <NuxtLink
                       v-for="link in group.items"
                       :key="link.name"
-                      :to="link.to?.name"
+                      :to="link.to"
                       :href="link.href"
                       :target="link.target"
                       class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
diff --git a/app/types/navigation.ts b/app/types/navigation.ts
index 11ff0b613e..eebb4ad684 100644
--- a/app/types/navigation.ts
+++ b/app/types/navigation.ts
@@ -1,10 +1,10 @@
+import type { NuxtLinkProps } from '#app'
+
 export type NavigationLink = {
   name: string
   label: string
   iconClass?: string
-  to?: {
-    name?: string
-  }
+  to?: NuxtLinkProps['to'] & { name?: string }
   href?: string
   target?: string
   keyshortcut?: string

From 6a188a5678cc245ffd0a886a5e811e0479217012 Mon Sep 17 00:00:00 2001
From: bdbch <dominik@bdbch.com>
Date: Sun, 8 Feb 2026 23:29:25 +0100
Subject: [PATCH 5/5] Always close mobile menu on link click

---
 app/components/Header/MobileMenu.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index e6a1065c86..36579ccbc3 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -201,7 +201,7 @@ onUnmounted(deactivate)
                       :href="link.href"
                       :target="link.target"
                       class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                      @click="link?.to && closeMenu()"
+                      @click="closeMenu"
                     >
                       <span
                         :class="link.iconClass"