From 8c489e0fbb84f27cb35b1a1de3b4af4feb80d479 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Mar 2026 15:43:28 +0000
Subject: [PATCH] fix: update footer nav layout

---
 app/components/AppFooter.vue | 218 ++++++++++++++++++-----------------
 1 file changed, 110 insertions(+), 108 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index ddccbc9019..49fcdf3a78 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -12,122 +12,124 @@ const closeModal = () => modalRef.value?.close?.()
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div
-        class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-baseline justify-between gap-2 sm:gap-4"
-      >
+      <div class="flex flex-col lg:flex-row lg:items-baseline justify-between gap-2 sm:gap-4">
         <div>
-          <p class="font-mono text-balance m-0 hidden sm:block">
+          <p class="font-mono text-balance m-0 hidden sm:block mb-3">
             {{ $t('tagline') }}
           </p>
+          <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
-          <LinkBase :to="{ name: 'about' }">
-            {{ $t('footer.about') }}
-          </LinkBase>
-          <LinkBase :to="{ name: 'blog' }">
-            {{ $t('footer.blog') }}
-          </LinkBase>
-          <LinkBase :to="{ name: 'privacy' }">
-            {{ $t('privacy_policy.title') }}
-          </LinkBase>
-          <LinkBase :to="{ name: 'accessibility' }">
-            {{ $t('a11y.footer_title') }}
-          </LinkBase>
-          <button
-            type="button"
-            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
-            @click.prevent="showModal"
-            aria-haspopup="dialog"
-          >
-            {{ $t('footer.keyboard_shortcuts') }}
-          </button>
+        <div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
+          <div class="flex items-center gap-5">
+            <LinkBase :to="{ name: 'about' }">
+              {{ $t('footer.about') }}
+            </LinkBase>
+            <LinkBase :to="{ name: 'blog' }">
+              {{ $t('footer.blog') }}
+            </LinkBase>
+            <LinkBase :to="{ name: 'privacy' }">
+              {{ $t('privacy_policy.title') }}
+            </LinkBase>
+            <LinkBase :to="{ name: 'accessibility' }">
+              {{ $t('a11y.footer_title') }}
+            </LinkBase>
+            <button
+              type="button"
+              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              @click.prevent="showModal"
+              aria-haspopup="dialog"
+            >
+              {{ $t('footer.keyboard_shortcuts') }}
+            </button>
 
-          <Modal
-            ref="modalRef"
-            :modalTitle="$t('footer.keyboard_shortcuts')"
-            class="w-auto max-w-lg"
-          >
-            <p class="mb-2 font-mono text-fg-subtle">
-              {{ $t('shortcuts.section.global') }}
-            </p>
-            <ul class="mb-6 flex flex-col gap-2">
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">/</kbd>
-                <span>{{ $t('shortcuts.focus_search') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">?</kbd>
-                <span>{{ $t('shortcuts.show_kbd_hints') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">,</kbd>
-                <span>{{ $t('shortcuts.settings') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">c</kbd>
-                <span>{{ $t('shortcuts.compare') }}</span>
-              </li>
-            </ul>
-            <p class="mb-2 font-mono text-fg-subtle">
-              {{ $t('shortcuts.section.search') }}
-            </p>
-            <ul class="mb-6 flex flex-col gap-2">
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
-                <span>{{ $t('shortcuts.navigate_results') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">Enter</kbd>
-                <span>{{ $t('shortcuts.go_to_result') }}</span>
-              </li>
-            </ul>
-            <p class="mb-2 font-mono text-fg-subtle">
-              {{ $t('shortcuts.section.package') }}
-            </p>
-            <ul class="mb-8 flex flex-col gap-2">
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">.</kbd>
-                <span>{{ $t('shortcuts.open_code_view') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">d</kbd>
-                <span>{{ $t('shortcuts.open_docs') }}</span>
-              </li>
-              <li class="flex gap-2 items-center">
-                <kbd class="kbd">c</kbd>
-                <span>{{ $t('shortcuts.compare_from_package') }}</span>
-              </li>
-            </ul>
-            <p class="text-fg-muted leading-relaxed">
-              <i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
-                <template #settings>
-                  <NuxtLink
-                    :to="{ name: 'settings' }"
-                    class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                    @click="closeModal"
-                  >
-                    {{ $t('settings.title') }}
-                  </NuxtLink>
-                </template>
-              </i18n-t>
-            </p>
-          </Modal>
-          <LinkBase :to="NPMX_DOCS_SITE">
-            {{ $t('footer.docs') }}
-          </LinkBase>
-          <LinkBase to="https://repo.npmx.dev">
-            {{ $t('footer.source') }}
-          </LinkBase>
-          <LinkBase to="https://social.npmx.dev">
-            {{ $t('footer.social') }}
-          </LinkBase>
-          <LinkBase to="https://chat.npmx.dev">
-            {{ $t('footer.chat') }}
-          </LinkBase>
+            <Modal
+              ref="modalRef"
+              :modalTitle="$t('footer.keyboard_shortcuts')"
+              class="w-auto max-w-lg"
+            >
+              <p class="mb-2 font-mono text-fg-subtle">
+                {{ $t('shortcuts.section.global') }}
+              </p>
+              <ul class="mb-6 flex flex-col gap-2">
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">/</kbd>
+                  <span>{{ $t('shortcuts.focus_search') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">?</kbd>
+                  <span>{{ $t('shortcuts.show_kbd_hints') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">,</kbd>
+                  <span>{{ $t('shortcuts.settings') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">c</kbd>
+                  <span>{{ $t('shortcuts.compare') }}</span>
+                </li>
+              </ul>
+              <p class="mb-2 font-mono text-fg-subtle">
+                {{ $t('shortcuts.section.search') }}
+              </p>
+              <ul class="mb-6 flex flex-col gap-2">
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
+                  <span>{{ $t('shortcuts.navigate_results') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">Enter</kbd>
+                  <span>{{ $t('shortcuts.go_to_result') }}</span>
+                </li>
+              </ul>
+              <p class="mb-2 font-mono text-fg-subtle">
+                {{ $t('shortcuts.section.package') }}
+              </p>
+              <ul class="mb-8 flex flex-col gap-2">
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">.</kbd>
+                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">d</kbd>
+                  <span>{{ $t('shortcuts.open_docs') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">c</kbd>
+                  <span>{{ $t('shortcuts.compare_from_package') }}</span>
+                </li>
+              </ul>
+              <p class="text-fg-muted leading-relaxed">
+                <i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
+                  <template #settings>
+                    <NuxtLink
+                      :to="{ name: 'settings' }"
+                      class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
+                      @click="closeModal"
+                    >
+                      {{ $t('settings.title') }}
+                    </NuxtLink>
+                  </template>
+                </i18n-t>
+              </p>
+            </Modal>
+          </div>
+          <div class="flex items-center gap-5">
+            <LinkBase :to="NPMX_DOCS_SITE">
+              {{ $t('footer.docs') }}
+            </LinkBase>
+            <LinkBase to="https://repo.npmx.dev">
+              {{ $t('footer.source') }}
+            </LinkBase>
+            <LinkBase to="https://social.npmx.dev">
+              {{ $t('footer.social') }}
+            </LinkBase>
+            <LinkBase to="https://chat.npmx.dev">
+              {{ $t('footer.chat') }}
+            </LinkBase>
+          </div>
         </div>
       </div>
-      <BuildEnvironment v-if="!isHome" footer />
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>