Skip to content

feat: use navigation builder for desktop and mobile links #1235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 5 commits into from
Feb 8, 2026
Merged

feat: use navigation builder for desktop and mobile links #1235

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f8174d
feat: use navigation builder for desktop and mobile links
bdbch Feb 8, 2026
8037974
fix typing issues & add guards for potential undefined types
bdbch Feb 8, 2026
ed206bb
Invoke closeMenu on mobile menu link click
bdbch Feb 8, 2026
0fb476c
Pass full NuxtLink 'to' prop in mobile menu
bdbch Feb 8, 2026
6a188a5
Always close mobile menu on link click
bdbch Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 124 additions & 30 deletions app/components/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { LinkBase } from '#components'
import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
import { isEditableElement } from '~/utils/input'

withDefaults(
Expand All @@ -13,6 +14,112 @@

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>(() => [

Check failure on line 38 in app/components/AppHeader.vue

View workflow job for this annotation

GitHub Actions / 💪 Type check 

No overload matches this call.
{
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',
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
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)

Expand Down Expand Up @@ -63,23 +170,18 @@
}

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)) {

Check failure on line 179 in app/components/AppHeader.vue

View workflow job for this annotation

GitHub Actions / 💪 Type check 

Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
e.preventDefault()
navigateTo(link.to.name)

Check failure on line 181 in app/components/AppHeader.vue

View workflow job for this annotation

GitHub Actions / 💪 Type check 

'link.to' is possibly 'undefined'.
break
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
},
{ dedupe: true },
)
Expand Down Expand Up @@ -152,25 +254,17 @@

<!-- 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>

Check failure on line 267 in app/components/AppHeader.vue

View workflow job for this annotation

GitHub Actions / 💪 Type check 

Type '{ name?: string | undefined; } | undefined' is not assignable to type 'RouteLocationRaw | undefined'.

<HeaderAccountMenu />
</div>
Expand All @@ -187,6 +281,6 @@
</nav>

<!-- Mobile menu -->
<HeaderMobileMenu v-model:open="showMobileMenu" />
<HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
</header>
</template>
165 changes: 36 additions & 129 deletions app/components/Header/MobileMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
import { useAtproto } from '~/composables/atproto/useAtproto'

const isOpen = defineModel<boolean>('open', { default: false })
const { links } = defineProps<{
links: NavigationConfigWithGroups

Check failure on line 7 in app/components/Header/MobileMenu.client.vue

View workflow job for this annotation

GitHub Actions / 💪 Type check 

Cannot find name 'NavigationConfigWithGroups'.
}>()
Comment thread
coderabbitai[bot] marked this conversation as resolved.

const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
const { user: atprotoUser } = useAtproto()
Expand Down Expand Up @@ -175,137 +178,41 @@

<!-- 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">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<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"
Comment thread
bdbch marked this conversation as resolved.
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"
Comment thread
bdbch marked this conversation as resolved.
Outdated
>
<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>
Expand Down
1 change: 1 addition & 0 deletions app/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './navigation'
Loading
Loading