fix(mobile-nav): address PR feedback (dedupe Docs, i18n labels, link rel)

Author: Adebesin-Cell

app/components/Header/MobileBottomBar.client.vue

@@ -87,7 +87,11 @@ function handleThemeClick() {
       />
       <ButtonBase
         type="button"
-        :aria-label="colorMode.value === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
+        :aria-label="
+          colorMode.value === 'dark'
+            ? $t('nav.switch_to_light_theme')
+            : $t('nav.switch_to_dark_theme')
+        "
         :classicon="colorMode.value === 'dark' ? 'i-lucide:sun' : 'i-lucide:moon'"
         @click="handleThemeClick"
       />

app/components/Header/MobileMenuDocsView.vue

@@ -6,7 +6,7 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const docsLinks = [{ label: 'Docs home', href: NPMX_DOCS_SITE, external: true }]
+const docsLinks = [{ labelKey: 'nav.docs_home', href: NPMX_DOCS_SITE, external: true }]
 </script>
 
 <template>
@@ -18,15 +18,15 @@ const docsLinks = [{ label: 'Docs home', href: NPMX_DOCS_SITE, external: true }]
         </span>
         <NuxtLink
           v-for="link in docsLinks"
-          :key="link.label"
+          :key="link.href"
           :href="link.href"
           target="_blank"
           rel="noopener noreferrer"
           class="flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
           @click="emit('close')"
         >
           <span class="i-lucide:file-text w-5 h-5 text-fg-muted" aria-hidden="true" />
-          <span class="flex-1">{{ link.label }}</span>
+          <span class="flex-1">{{ $t(link.labelKey) }}</span>
           <span
             v-if="link.external"
             class="i-lucide:external-link rtl-flip w-3 h-3 ms-auto text-fg-subtle"

app/components/Header/MobileMenuRootView.vue

@@ -137,6 +137,7 @@ const { user: atprotoUser } = useAtproto()
             :to="link.to"
             :href="link.href"
             :target="link.target"
+            :rel="link.external ? 'noopener noreferrer' : undefined"
             class="flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
             @click="emit('close')"
           >

app/composables/useGlobalNavLinks.ts

@@ -1,5 +1,4 @@
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
-import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 export function useGlobalNavLinks() {
   const discord = useDiscordLink()
@@ -97,15 +96,6 @@ export function useGlobalNavLinks() {
       type: 'group',
       label: $t('nav.links'),
       items: [
-        {
-          name: 'Docs',
-          label: $t('footer.docs'),
-          href: NPMX_DOCS_SITE,
-          target: '_blank',
-          type: 'link',
-          external: true,
-          iconClass: 'i-lucide:file-text',
-        },
         {
           name: 'Source',
           label: $t('footer.source'),

i18n/locales/en.json

@@ -198,6 +198,9 @@
     "back_to_main_menu": "Back to main menu",
     "docs_label": "Docs",
     "close_menu": "Close menu",
+    "switch_to_light_theme": "Switch to light theme",
+    "switch_to_dark_theme": "Switch to dark theme",
+    "docs_home": "Docs home",
     "links": "Links",
     "tap_to_search": "Tap to search"
   },