From 07d42668c3aba1d7cef439bf9ec25f9773c6fb7e Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sun, 13 Sep 2026 14:01:18 +0100
Subject: [PATCH] feat: draft menu redesign

---
 app/components/AppHeader.vue                 | 170 ++++++----
 app/components/Header/AccountMenu.client.vue | 331 ++++++-------------
 app/components/Header/SearchBox.vue          |   2 +-
 app/components/MenuDropdown.vue              | 162 +++++++++
 app/types/index.ts                           |   1 +
 app/types/menu-dropdown.ts                   |  23 ++
 i18n/locales/en.json                         |   5 +-
 7 files changed, 397 insertions(+), 297 deletions(-)
 create mode 100644 app/components/MenuDropdown.vue
 create mode 100644 app/types/menu-dropdown.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 223a2be7ef..934cac0f13 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { LinkBase } from '#components'
-import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
+import type { MenuDropdownItem, NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const discord = useDiscordLink()
@@ -47,6 +46,25 @@ const desktopLinks = computed<NavigationConfig>(() => [
   },
 ])
 
+const featureItems = computed<MenuDropdownItem[]>(() => [
+  {
+    type: 'link',
+    icon: 'i-lucide:git-compare',
+    title: $t('nav.compare'),
+    description: $t('nav.compare_desc'),
+    shortcut: 'c',
+    href: compareTarget.value,
+  },
+  {
+    type: 'link',
+    icon: 'i-lucide:settings',
+    title: $t('nav.settings'),
+    description: $t('nav.settings_desc'),
+    shortcut: ',',
+    href: { name: 'settings' },
+  },
+])
+
 const mobileLinks = computed<NavigationConfigWithGroups>(() => [
   {
     name: 'Desktop Links',
@@ -229,69 +247,54 @@ useShortcuts({
       :aria-label="$t('nav.main_navigation')"
       class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
     >
-      <!-- Mobile: Logo (navigates home) -->
-      <LogoContextMenu v-if="!isSearchExpanded && !isOnHomePage" class="sm:hidden flex-shrink-0">
-        <NuxtLink
-          to="/"
-          :aria-label="$t('header.home')"
-          class="font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
-        >
-          <AppMark class="w-6 h-auto" />
-        </NuxtLink>
-      </LogoContextMenu>
+      <!-- Group 1: Logo -->
+      <div class="flex items-center flex-shrink-0">
+        <!-- Mobile: Logo (navigates home) -->
+        <LogoContextMenu v-if="!isSearchExpanded && !isOnHomePage" class="sm:hidden flex-shrink-0">
+          <NuxtLink
+            to="/"
+            :aria-label="$t('header.home')"
+            class="font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
+          >
+            <AppMark class="w-6 h-auto" />
+          </NuxtLink>
+        </LogoContextMenu>
+
+        <!-- Desktop: Logo (navigates home) -->
+        <LogoContextMenu v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
+          <NuxtLink
+            :to="{ name: 'index' }"
+            :aria-label="$t('header.home')"
+            dir="ltr"
+            class="relative inline-flex items-center gap-1 py-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4"
+          >
+            <AppLogo class="h-4.5 w-auto" />
+            <span
+              aria-hidden="true"
+              class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.75 -inset-ie-1"
+            >
+              {{ env === 'release' ? 'alpha' : env }}
+            </span>
+          </NuxtLink>
+        </LogoContextMenu>
 
-      <!-- Desktop: Logo (navigates home) -->
-      <LogoContextMenu v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
         <NuxtLink
-          :to="{ name: 'index' }"
-          :aria-label="$t('header.home')"
-          dir="ltr"
-          class="relative inline-flex items-center gap-1 py-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4"
+          v-if="showLogo && !isSearchExpanded && prNumber"
+          :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
+          :aria-label="$t('header.pr', { prNumber })"
         >
-          <AppLogo class="h-4.5 w-auto" />
-          <span
-            aria-hidden="true"
-            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.75 -inset-ie-1"
-          >
-            {{ env === 'release' ? 'alpha' : env }}
+          <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium">
+            PR #{{ prNumber }}
           </span>
         </NuxtLink>
-      </LogoContextMenu>
-
-      <NuxtLink
-        v-if="showLogo && !isSearchExpanded && prNumber"
-        :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
-        :aria-label="$t('header.pr', { prNumber })"
-      >
-        <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium">
-          PR #{{ prNumber }}
-        </span>
-      </NuxtLink>
-
-      <!-- Spacer when logo is hidden on desktop -->
-      <span v-else class="hidden sm:block w-1" />
 
-      <ButtonBase
-        type="button"
-        variant="secondary"
-        class="hidden lg:inline-flex shrink-0 gap-2 ps-2.5 pe-1.25 py-1.25! me-3"
-        :aria-label="$t('shortcuts.command_palette')"
-        :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
-        @click="openCommandPalette"
-      >
-        <span>{{ $t('command_palette.quick_actions') }}</span>
-        <span class="inline-flex items-center gap-1 text-xs text-fg-subtle">
-          <kbd
-            class="inline-flex items-center justify-center rounded border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
-          >
-            {{ commandPaletteShortcutLabel }}
-          </kbd>
-        </span>
-      </ButtonBase>
+        <!-- Spacer when logo is hidden on desktop -->
+        <span v-else class="hidden sm:block w-1" />
+      </div>
 
-      <!-- Center: Search bar + nav items -->
+      <!-- Group 2: Search + jump to -->
       <div
-        class="flex-1 flex items-center md:gap-6"
+        class="flex-1 flex items-center gap-2"
         :class="{
           'hidden sm:flex': !isSearchExpanded,
           'justify-end': isOnHomePage,
@@ -321,21 +324,48 @@ useShortcuts({
             <HeaderOrgsDropdown :username="npmUser" />
           </li>
         </ul>
-      </div>
 
-      <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0 items-center gap-2">
-        <!-- Desktop: Explore link -->
-        <LinkBase
-          v-for="link in desktopLinks"
-          :key="link.name"
-          class="border-none"
-          variant="button-secondary"
-          :to="link.to"
-          :aria-keyshortcuts="link.keyshortcut"
+        <ButtonBase
+          type="button"
+          variant="secondary"
+          class="hidden lg:inline-flex shrink-0 gap-2 ps-2.5 pe-1.25 py-1.5!"
+          :aria-label="$t('shortcuts.command_palette')"
+          :title="
+            $t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })
+          "
+          @click="openCommandPalette"
         >
-          {{ link.label }}
-        </LinkBase>
+          <span>{{ $t('command_palette.quick_actions') }}</span>
+          <span class="inline-flex items-center gap-1 text-xs text-fg-subtle">
+            <kbd
+              class="inline-flex items-center justify-center rounded border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              {{ commandPaletteShortcutLabel }}
+            </kbd>
+          </span>
+        </ButtonBase>
+      </div>
+
+      <!-- Group 3: Features + connect -->
+      <div class="hidden sm:flex flex-shrink-0 items-center gap-1">
+        <MenuDropdown :items="featureItems">
+          <template #trigger="{ open, toggle }">
+            <ButtonBase
+              type="button"
+              class="border-none"
+              :aria-expanded="open"
+              aria-haspopup="true"
+              @click="toggle"
+            >
+              {{ $t('nav.features') }}
+              <span
+                class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
+                :class="{ 'rotate-180': open }"
+                aria-hidden="true"
+              />
+            </ButtonBase>
+          </template>
+        </MenuDropdown>
 
         <HeaderAccountMenu />
       </div>
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 00fa7a194a..672acad319 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { useModal } from '~/composables/useModal'
+import type { MenuDropdownItem } from '~/types'
 
 const {
   isConnected: isNpmConnected,
@@ -13,8 +14,6 @@ const {
 
 const { user: atprotoUser } = useAtproto()
 
-const isOpen = shallowRef(false)
-
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
 
@@ -24,251 +23,133 @@ const hasBothConnections = computed(() => isNpmConnected.value && !!atprotoUser.
 /** Only show count of active (pending/approved/running) operations */
 const operationCount = computed(() => activeOperations.value.length)
 
-const accountMenuRef = useTemplateRef('accountMenuRef')
-
-onClickOutside(accountMenuRef, () => {
-  isOpen.value = false
-})
-
-useEventListener('keydown', event => {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-  }
-})
-
 const connectorModal = useModal('connector-modal')
 
 function openConnectorModal() {
-  if (connectorModal) {
-    isOpen.value = false
-    connectorModal.open()
-  }
+  connectorModal?.open()
 }
 
 const authModal = useModal('auth-modal')
 
 function openAuthModal() {
-  if (authModal) {
-    isOpen.value = false
-    authModal.open()
-  }
+  authModal?.open()
 }
+
+const items = computed<MenuDropdownItem[]>(() => [
+  isNpmConnected.value && npmUser.value
+    ? {
+        type: 'action',
+        icon: 'i-lucide:terminal',
+        title: `~${npmUser.value}`,
+        description:
+          operationCount.value > 0
+            ? $t('account_menu.ops', { count: operationCount.value })
+            : $t('account_menu.npm_cli'),
+        handler: openConnectorModal,
+      }
+    : {
+        type: 'action',
+        icon: 'i-lucide:terminal',
+        title: isNpmConnecting.value
+          ? $t('account_menu.connecting')
+          : $t('account_menu.connect_npm_cli'),
+        description: $t('account_menu.npm_cli_desc'),
+        handler: openConnectorModal,
+      },
+  atprotoUser.value
+    ? {
+        type: 'action',
+        icon: 'i-lucide:at-sign',
+        title: `@${atprotoUser.value.handle}`,
+        description: $t('account_menu.atmosphere'),
+        handler: openAuthModal,
+      }
+    : {
+        type: 'action',
+        icon: 'i-lucide:at-sign',
+        title: $t('account_menu.connect_atmosphere'),
+        description: $t('account_menu.atmosphere_desc'),
+        handler: openAuthModal,
+      },
+])
 </script>
 
 <template>
-  <div ref="accountMenuRef" class="relative flex min-w-28 justify-end">
-    <ButtonBase
-      type="button"
-      :aria-expanded="isOpen"
-      aria-haspopup="true"
-      @click="isOpen = !isOpen"
-      class="border-none"
-    >
-      <!-- Stacked avatars when connected -->
-      <span
-        v-if="hasAnyConnection"
-        class="flex items-center"
-        :class="hasBothConnections ? '-space-x-2' : ''"
+  <MenuDropdown :items="items" class="min-w-28 flex justify-end">
+    <template #trigger="{ open, toggle }">
+      <ButtonBase
+        type="button"
+        :aria-expanded="open"
+        aria-haspopup="true"
+        class="py-1.75! border-none"
+        @click="toggle"
       >
-        <!-- npm avatar (first/back) -->
-        <img
-          v-if="isNpmConnected && npmAvatar"
-          :src="npmAvatar"
-          :alt="npmUser || $t('account_menu.npm_cli')"
-          width="24"
-          height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
-        />
+        <!-- Stacked avatars when connected -->
         <span
-          v-else-if="isNpmConnected"
-          class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
+          v-if="hasAnyConnection"
+          class="flex items-center"
+          :class="hasBothConnections ? '-space-x-2' : ''"
         >
-          <span class="i-lucide:terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+          <!-- npm avatar (first/back) -->
+          <img
+            v-if="isNpmConnected && npmAvatar"
+            :src="npmAvatar"
+            :alt="npmUser || $t('account_menu.npm_cli')"
+            width="24"
+            height="24"
+            class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
+          />
+          <span
+            v-else-if="isNpmConnected"
+            class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
+          >
+            <span class="i-lucide:terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+          </span>
+
+          <!-- Atmosphere avatar (second/front, overlapping) -->
+          <img
+            v-if="atprotoUser?.avatar"
+            :src="atprotoUser.avatar"
+            :alt="atprotoUser.handle"
+            width="24"
+            height="24"
+            class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
+            :class="hasBothConnections ? 'relative z-10' : ''"
+          />
+          <span
+            v-else-if="atprotoUser"
+            class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
+            :class="hasBothConnections ? 'relative z-10' : ''"
+          >
+            <span class="i-lucide:at-sign w-3 h-3 text-fg-muted" aria-hidden="true" />
+          </span>
         </span>
 
-        <!-- Atmosphere avatar (second/front, overlapping) -->
-        <img
-          v-if="atprotoUser?.avatar"
-          :src="atprotoUser.avatar"
-          :alt="atprotoUser.handle"
-          width="24"
-          height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
-          :class="hasBothConnections ? 'relative z-10' : ''"
-        />
-        <span
-          v-else-if="atprotoUser"
-          class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
-          :class="hasBothConnections ? 'relative z-10' : ''"
-        >
-          <span class="i-lucide:at-sign w-3 h-3 text-fg-muted" aria-hidden="true" />
+        <!-- "connect" text when not connected -->
+        <span v-if="!hasAnyConnection" class="font-mono text-sm">
+          {{ $t('account_menu.connect') }}
         </span>
-      </span>
 
-      <!-- "connect" text when not connected -->
-      <span v-if="!hasAnyConnection" class="font-mono text-sm">
-        {{ $t('account_menu.connect') }}
-      </span>
-
-      <!-- Chevron -->
-      <span
-        class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
-        :class="{ 'rotate-180': isOpen }"
-        aria-hidden="true"
-      />
-
-      <!-- Operation count badge (when npm connected with pending ops) -->
-      <span
-        v-if="isNpmConnected && operationCount > 0"
-        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-3xs rounded-full"
-        :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
-        aria-hidden="true"
-      >
-        {{ operationCount }}
-      </span>
-    </ButtonBase>
+        <!-- Chevron -->
+        <span
+          class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          aria-hidden="true"
+        />
 
-    <!-- Dropdown menu -->
-    <Transition
-      enter-active-class="transition-all duration-150"
-      leave-active-class="transition-all duration-100"
-      enter-from-class="opacity-0 translate-y-1"
-      leave-to-class="opacity-0 translate-y-1"
-    >
-      <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
-        <div
-          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
+        <!-- Operation count badge (when npm connected with pending ops) -->
+        <span
+          v-if="isNpmConnected && operationCount > 0"
+          class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-3xs rounded-full"
+          :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
+          aria-hidden="true"
         >
-          <!-- Connected accounts section -->
-          <div v-if="hasAnyConnection" class="py-1">
-            <!-- npm CLI connection -->
-            <ButtonBase
-              v-if="isNpmConnected && npmUser"
-              role="menuitem"
-              class="w-full text-start gap-x-3 border-none"
-              @click="openConnectorModal"
-              out
-            >
-              <img
-                v-if="npmAvatar"
-                :src="npmAvatar"
-                :alt="npmUser"
-                width="32"
-                height="32"
-                class="w-8 h-8 rounded-full object-cover"
-              />
-              <span
-                v-else
-                class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
-              >
-                <span class="i-lucide:terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
-              </span>
-              <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
-                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
-              </span>
-              <span
-                v-if="operationCount > 0"
-                class="px-1.5 py-0.5 font-mono text-xs rounded"
-                :class="
-                  hasPendingOperations
-                    ? 'bg-yellow-500/20 text-yellow-600'
-                    : 'bg-blue-500/20 text-blue-500'
-                "
-              >
-                {{
-                  $t('account_menu.ops', {
-                    count: operationCount,
-                  })
-                }}
-              </span>
-            </ButtonBase>
-
-            <!-- Atmosphere connection -->
-            <ButtonBase
-              v-if="atprotoUser"
-              role="menuitem"
-              class="w-full text-start gap-x-3 border-none"
-              @click="openAuthModal"
-            >
-              <img
-                v-if="atprotoUser.avatar"
-                :src="atprotoUser.avatar"
-                :alt="atprotoUser.handle"
-                width="32"
-                height="32"
-                class="w-8 h-8 rounded-full object-cover"
-              />
-              <span
-                v-else
-                class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
-              >
-                <span class="i-lucide:at-sign w-4 h-4 text-fg-muted" aria-hidden="true" />
-              </span>
-              <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg truncate block"
-                  >@{{ atprotoUser.handle }}</span
-                >
-                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
-              </span>
-            </ButtonBase>
-          </div>
-
-          <!-- Divider (only if we have connections AND options to connect) -->
-          <div
-            v-if="hasAnyConnection && (!isNpmConnected || !atprotoUser)"
-            class="border-t border-border"
-          />
-
-          <!-- Connect options -->
-          <div v-if="!isNpmConnected || !atprotoUser" class="py-1">
-            <ButtonBase
-              v-if="!isNpmConnected"
-              role="menuitem"
-              class="w-full text-start gap-x-3 border-none"
-              @click="openConnectorModal"
-            >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
-                <span
-                  v-if="isNpmConnecting"
-                  class="i-svg-spinners:ring-resize w-4 h-4 text-yellow-500 animate-spin"
-                  aria-hidden="true"
-                />
-                <span v-else class="i-lucide:terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
-              </span>
-              <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg block">
-                  {{
-                    isNpmConnecting
-                      ? $t('account_menu.connecting')
-                      : $t('account_menu.connect_npm_cli')
-                  }}
-                </span>
-                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
-              </span>
-            </ButtonBase>
+          {{ operationCount }}
+        </span>
+      </ButtonBase>
+    </template>
+  </MenuDropdown>
 
-            <ButtonBase
-              v-if="!atprotoUser"
-              role="menuitem"
-              class="w-full text-start gap-x-3 border-none"
-              @click="openAuthModal"
-            >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
-                <span class="i-lucide:at-sign w-4 h-4 text-fg-muted" aria-hidden="true" />
-              </span>
-              <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg block">
-                  {{ $t('account_menu.connect_atmosphere') }}
-                </span>
-                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
-              </span>
-            </ButtonBase>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
   <HeaderConnectorModal />
   <HeaderAuthModal />
 </template>
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index e416735a58..1f304ee79a 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -70,7 +70,7 @@ defineExpose({ focus, blur })
             name="q"
             :placeholder="$t('search.placeholder')"
             no-correct
-            class="w-full min-w-25 ps-7 pe-8"
+            class="w-full min-w-25 ps-7 pe-8 py-2.5!"
             @focus="handleFocus"
             @blur="handleBlur"
             size="sm"
diff --git a/app/components/MenuDropdown.vue b/app/components/MenuDropdown.vue
new file mode 100644
index 0000000000..3ecf6e3f0f
--- /dev/null
+++ b/app/components/MenuDropdown.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+import type { MenuDropdownItem } from '~/types'
+
+defineProps<{
+  items: MenuDropdownItem[]
+}>()
+
+defineSlots<{
+  trigger(props: { open: boolean; toggle: () => void }): unknown
+}>()
+
+const rootRef = useTemplateRef('rootRef')
+const panelRef = useTemplateRef('panelRef')
+
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
+
+const isOpen = shallowRef(false)
+// Set by a click on the trigger: keeps the menu open regardless of hover/focus
+// until it's explicitly dismissed (click again, click an item, click outside, Escape).
+const isPinned = shallowRef(false)
+
+// Full-width panel is teleported to <body> so it can bleed edge-to-edge;
+// track the closest <header> to pin the panel right under it.
+const headerEl = shallowRef<HTMLElement | null>(null)
+const { bottom: headerBottom } = useElementBounding(headerEl)
+
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearCloseTimer() {
+  if (closeTimer) {
+    clearTimeout(closeTimer)
+    closeTimer = undefined
+  }
+}
+
+function open() {
+  clearCloseTimer()
+  if (!headerEl.value) {
+    headerEl.value = rootRef.value?.closest('header') ?? null
+  }
+  isOpen.value = true
+}
+
+function close() {
+  clearCloseTimer()
+  isOpen.value = false
+  isPinned.value = false
+}
+
+// Delay closing so moving the pointer/focus from the trigger down into the
+// teleported panel (which isn't a DOM descendant of the trigger) doesn't flicker-close it.
+function scheduleClose() {
+  if (isPinned.value) return
+  clearCloseTimer()
+  closeTimer = setTimeout(close, 200)
+}
+
+function toggle() {
+  if (isOpen.value && isPinned.value) {
+    close()
+  } else {
+    open()
+    isPinned.value = true
+  }
+}
+
+function handleItemClick(item: MenuDropdownItem) {
+  if (item.type === 'action') {
+    item.handler()
+  }
+  close()
+}
+
+onClickOutside(rootRef, close, { ignore: [panelRef] })
+
+useEventListener('keydown', event => {
+  if (event.key === 'Escape' && isOpen.value) {
+    close()
+  }
+})
+
+onUnmounted(clearCloseTimer)
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="relative"
+    @mouseenter="open"
+    @mouseleave="scheduleClose"
+    @focusin="open"
+    @focusout="scheduleClose"
+  >
+    <slot name="trigger" :open="isOpen" :toggle="toggle" />
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-all duration-150"
+        leave-active-class="transition-all duration-100"
+        enter-from-class="opacity-0 -translate-y-1"
+        leave-to-class="opacity-0 -translate-y-1"
+      >
+        <div
+          v-if="isOpen"
+          ref="panelRef"
+          role="menu"
+          class="fixed inset-x-0 z-60"
+          :style="{ top: `${headerBottom}px` }"
+          @mouseenter="open"
+          @mouseleave="scheduleClose"
+          @focusin="open"
+          @focusout="scheduleClose"
+        >
+          <div
+            class="absolute inset-0 -z-1 bg-bg/70 backdrop-blur-xl border-b border-border-subtle"
+          />
+
+          <div class="container py-6">
+            <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              <component
+                :is="item.type === 'link' ? NuxtLink : 'button'"
+                v-for="(item, index) in items"
+                :key="index"
+                role="menuitem"
+                :type="item.type === 'action' ? 'button' : undefined"
+                :to="item.type === 'link' ? item.href : undefined"
+                :target="item.type === 'link' && item.external ? '_blank' : undefined"
+                :aria-keyshortcuts="keyboardShortcutsEnabled ? item.shortcut : undefined"
+                class="group cursor-pointer flex items-start gap-3 p-3 rounded-lg border border-transparent text-start hover:bg-bg-elevated hover:border-border focus-visible:bg-bg-elevated focus-visible:border-border transition-colors duration-200 focus-visible:outline-none"
+                @click="handleItemClick(item)"
+              >
+                <span
+                  v-if="item.icon"
+                  class="flex-shrink-0 w-9 h-9 rounded-md bg-bg-muted flex items-center justify-center group-hover:bg-bg-subtle transition-colors duration-200"
+                >
+                  <span :class="item.icon" class="w-4.5 h-4.5 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="min-w-0 flex-1">
+                  <span class="flex items-center gap-2">
+                    <span class="font-mono text-sm text-fg truncate">{{ item.title }}</span>
+                    <kbd
+                      v-if="item.shortcut && keyboardShortcutsEnabled"
+                      data-kbd-hint
+                      class="ms-auto shrink-0 inline-flex items-center justify-center min-w-4 h-4 px-1 text-3xs text-fg bg-bg-muted border border-border rounded no-underline"
+                      aria-hidden="true"
+                    >
+                      {{ item.shortcut }}
+                    </kbd>
+                  </span>
+                  <span v-if="item.description" class="block text-xs text-fg-subtle mt-0.5">
+                    {{ item.description }}
+                  </span>
+                </span>
+              </component>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/app/types/index.ts b/app/types/index.ts
index f736f8b329..f8b1b2d96a 100644
--- a/app/types/index.ts
+++ b/app/types/index.ts
@@ -2,6 +2,7 @@ import '#app'
 import '#vue-router'
 export * from './icon'
 export * from './navigation'
+export * from './menu-dropdown'
 
 declare module '#app' {
   interface PageMeta {
diff --git a/app/types/menu-dropdown.ts b/app/types/menu-dropdown.ts
new file mode 100644
index 0000000000..bcbf36186f
--- /dev/null
+++ b/app/types/menu-dropdown.ts
@@ -0,0 +1,23 @@
+import type { NuxtLinkProps } from '#app'
+import type { IconClass } from './icon'
+
+type MenuDropdownItemBase = {
+  title: string
+  description?: string
+  icon?: IconClass
+  /** Keyboard shortcut hint, e.g. "c" or "⌘K" */
+  shortcut?: string
+}
+
+export type MenuDropdownLinkItem = MenuDropdownItemBase & {
+  type: 'link'
+  href: NuxtLinkProps['to']
+  external?: boolean
+}
+
+export type MenuDropdownActionItem = MenuDropdownItemBase & {
+  type: 'action'
+  handler: () => void
+}
+
+export type MenuDropdownItem = MenuDropdownLinkItem | MenuDropdownActionItem
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1e164af70a..594ccb65ec 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -206,13 +206,16 @@
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
     "settings": "settings",
+    "settings_desc": "Manage your preferences",
     "compare": "compare",
+    "compare_desc": "Compare packages side by side",
     "back": "back",
     "menu": "Menu",
     "mobile_menu": "Navigation menu",
     "open_menu": "Open menu",
     "links": "Links",
-    "tap_to_search": "Tap to search"
+    "tap_to_search": "Tap to search",
+    "features": "features"
   },
   "blog": {
     "title": "Blog",