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 all commits
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
148 changes: 118 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,106 @@ 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' },
type: 'link',
external: false,
iconClass: 'i-carbon:information',
},
{
name: 'Privacy Policy',
label: $t('privacy_policy.title'),
to: { name: 'privacy' },
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',
type: 'link',
external: true,
iconClass: 'i-carbon:document',
},
{
name: 'Source',
label: $t('footer.source'),
href: 'https://repo.npmx.dev',
target: '_blank',
type: 'link',
external: true,
iconClass: 'i-carbon:logo-github',
},
{
name: 'Social',
label: $t('footer.social'),
href: 'https://social.npmx.dev',
target: '_blank',
type: 'link',
external: true,
iconClass: 'i-simple-icons:bluesky',
},
{
name: 'Chat',
label: $t('footer.chat'),
href: 'https://chat.npmx.dev',
target: '_blank',
type: 'link',
external: true,
iconClass: 'i-carbon:chat',
},
],
},
])

const showFullSearch = shallowRef(false)
const showMobileMenu = shallowRef(false)

Expand Down Expand Up @@ -63,23 +164,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 (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
e.preventDefault()
navigateTo(link.to.name)
break
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
},
{ dedupe: true },
)
Expand Down Expand Up @@ -152,24 +248,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 />
Expand All @@ -187,6 +275,6 @@ onKeyStroke(
</nav>

<!-- Mobile menu -->
<HeaderMobileMenu v-model:open="showMobileMenu" />
<HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
</header>
</template>
170 changes: 41 additions & 129 deletions app/components/Header/MobileMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<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<{
links: 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 +179,45 @@ 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" />

<!-- 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') }}
<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>
<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"
/>

<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') }}
<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>
</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="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>
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