Skip to content

Commit e4774cf

Browse files
alexdlnalexdln
authored
fix: update footer nav layout (#1839)
1 parent 43252c6 commit e4774cf

File tree

1 file changed

+110
-108
lines changed

1 file changed

+110
-108
lines changed

‎app/components/AppFooter.vue‎

Lines changed: 110 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -12,122 +12,124 @@ const closeModal = () => modalRef.value?.close?.()
1212
<template>
1313
<footer class="border-t border-border mt-auto">
1414
<div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
15-
<div
16-
class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-baseline justify-between gap-2 sm:gap-4"
17-
>
15+
<div class="flex flex-col lg:flex-row lg:items-baseline justify-between gap-2 sm:gap-4">
1816
<div>
19-
<p class="font-mono text-balance m-0 hidden sm:block">
17+
<p class="font-mono text-balance m-0 hidden sm:block mb-3">
2018
{{ $t('tagline') }}
2119
</p>
20+
<BuildEnvironment v-if="!isHome" footer />
2221
</div>
2322
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
24-
<div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
25-
<LinkBase :to="{ name: 'about' }">
26-
{{ $t('footer.about') }}
27-
</LinkBase>
28-
<LinkBase :to="{ name: 'blog' }">
29-
{{ $t('footer.blog') }}
30-
</LinkBase>
31-
<LinkBase :to="{ name: 'privacy' }">
32-
{{ $t('privacy_policy.title') }}
33-
</LinkBase>
34-
<LinkBase :to="{ name: 'accessibility' }">
35-
{{ $t('a11y.footer_title') }}
36-
</LinkBase>
37-
<button
38-
type="button"
39-
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"
40-
@click.prevent="showModal"
41-
aria-haspopup="dialog"
42-
>
43-
{{ $t('footer.keyboard_shortcuts') }}
44-
</button>
23+
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
24+
<div class="flex items-center gap-5">
25+
<LinkBase :to="{ name: 'about' }">
26+
{{ $t('footer.about') }}
27+
</LinkBase>
28+
<LinkBase :to="{ name: 'blog' }">
29+
{{ $t('footer.blog') }}
30+
</LinkBase>
31+
<LinkBase :to="{ name: 'privacy' }">
32+
{{ $t('privacy_policy.title') }}
33+
</LinkBase>
34+
<LinkBase :to="{ name: 'accessibility' }">
35+
{{ $t('a11y.footer_title') }}
36+
</LinkBase>
37+
<button
38+
type="button"
39+
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"
40+
@click.prevent="showModal"
41+
aria-haspopup="dialog"
42+
>
43+
{{ $t('footer.keyboard_shortcuts') }}
44+
</button>
4545

46-
<Modal
47-
ref="modalRef"
48-
:modalTitle="$t('footer.keyboard_shortcuts')"
49-
class="w-auto max-w-lg"
50-
>
51-
<p class="mb-2 font-mono text-fg-subtle">
52-
{{ $t('shortcuts.section.global') }}
53-
</p>
54-
<ul class="mb-6 flex flex-col gap-2">
55-
<li class="flex gap-2 items-center">
56-
<kbd class="kbd">/</kbd>
57-
<span>{{ $t('shortcuts.focus_search') }}</span>
58-
</li>
59-
<li class="flex gap-2 items-center">
60-
<kbd class="kbd">?</kbd>
61-
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
62-
</li>
63-
<li class="flex gap-2 items-center">
64-
<kbd class="kbd">,</kbd>
65-
<span>{{ $t('shortcuts.settings') }}</span>
66-
</li>
67-
<li class="flex gap-2 items-center">
68-
<kbd class="kbd">c</kbd>
69-
<span>{{ $t('shortcuts.compare') }}</span>
70-
</li>
71-
</ul>
72-
<p class="mb-2 font-mono text-fg-subtle">
73-
{{ $t('shortcuts.section.search') }}
74-
</p>
75-
<ul class="mb-6 flex flex-col gap-2">
76-
<li class="flex gap-2 items-center">
77-
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
78-
<span>{{ $t('shortcuts.navigate_results') }}</span>
79-
</li>
80-
<li class="flex gap-2 items-center">
81-
<kbd class="kbd">Enter</kbd>
82-
<span>{{ $t('shortcuts.go_to_result') }}</span>
83-
</li>
84-
</ul>
85-
<p class="mb-2 font-mono text-fg-subtle">
86-
{{ $t('shortcuts.section.package') }}
87-
</p>
88-
<ul class="mb-8 flex flex-col gap-2">
89-
<li class="flex gap-2 items-center">
90-
<kbd class="kbd">.</kbd>
91-
<span>{{ $t('shortcuts.open_code_view') }}</span>
92-
</li>
93-
<li class="flex gap-2 items-center">
94-
<kbd class="kbd">d</kbd>
95-
<span>{{ $t('shortcuts.open_docs') }}</span>
96-
</li>
97-
<li class="flex gap-2 items-center">
98-
<kbd class="kbd">c</kbd>
99-
<span>{{ $t('shortcuts.compare_from_package') }}</span>
100-
</li>
101-
</ul>
102-
<p class="text-fg-muted leading-relaxed">
103-
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
104-
<template #settings>
105-
<NuxtLink
106-
:to="{ name: 'settings' }"
107-
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
108-
@click="closeModal"
109-
>
110-
{{ $t('settings.title') }}
111-
</NuxtLink>
112-
</template>
113-
</i18n-t>
114-
</p>
115-
</Modal>
116-
<LinkBase :to="NPMX_DOCS_SITE">
117-
{{ $t('footer.docs') }}
118-
</LinkBase>
119-
<LinkBase to="https://repo.npmx.dev">
120-
{{ $t('footer.source') }}
121-
</LinkBase>
122-
<LinkBase to="https://social.npmx.dev">
123-
{{ $t('footer.social') }}
124-
</LinkBase>
125-
<LinkBase to="https://chat.npmx.dev">
126-
{{ $t('footer.chat') }}
127-
</LinkBase>
46+
<Modal
47+
ref="modalRef"
48+
:modalTitle="$t('footer.keyboard_shortcuts')"
49+
class="w-auto max-w-lg"
50+
>
51+
<p class="mb-2 font-mono text-fg-subtle">
52+
{{ $t('shortcuts.section.global') }}
53+
</p>
54+
<ul class="mb-6 flex flex-col gap-2">
55+
<li class="flex gap-2 items-center">
56+
<kbd class="kbd">/</kbd>
57+
<span>{{ $t('shortcuts.focus_search') }}</span>
58+
</li>
59+
<li class="flex gap-2 items-center">
60+
<kbd class="kbd">?</kbd>
61+
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
62+
</li>
63+
<li class="flex gap-2 items-center">
64+
<kbd class="kbd">,</kbd>
65+
<span>{{ $t('shortcuts.settings') }}</span>
66+
</li>
67+
<li class="flex gap-2 items-center">
68+
<kbd class="kbd">c</kbd>
69+
<span>{{ $t('shortcuts.compare') }}</span>
70+
</li>
71+
</ul>
72+
<p class="mb-2 font-mono text-fg-subtle">
73+
{{ $t('shortcuts.section.search') }}
74+
</p>
75+
<ul class="mb-6 flex flex-col gap-2">
76+
<li class="flex gap-2 items-center">
77+
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
78+
<span>{{ $t('shortcuts.navigate_results') }}</span>
79+
</li>
80+
<li class="flex gap-2 items-center">
81+
<kbd class="kbd">Enter</kbd>
82+
<span>{{ $t('shortcuts.go_to_result') }}</span>
83+
</li>
84+
</ul>
85+
<p class="mb-2 font-mono text-fg-subtle">
86+
{{ $t('shortcuts.section.package') }}
87+
</p>
88+
<ul class="mb-8 flex flex-col gap-2">
89+
<li class="flex gap-2 items-center">
90+
<kbd class="kbd">.</kbd>
91+
<span>{{ $t('shortcuts.open_code_view') }}</span>
92+
</li>
93+
<li class="flex gap-2 items-center">
94+
<kbd class="kbd">d</kbd>
95+
<span>{{ $t('shortcuts.open_docs') }}</span>
96+
</li>
97+
<li class="flex gap-2 items-center">
98+
<kbd class="kbd">c</kbd>
99+
<span>{{ $t('shortcuts.compare_from_package') }}</span>
100+
</li>
101+
</ul>
102+
<p class="text-fg-muted leading-relaxed">
103+
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
104+
<template #settings>
105+
<NuxtLink
106+
:to="{ name: 'settings' }"
107+
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
108+
@click="closeModal"
109+
>
110+
{{ $t('settings.title') }}
111+
</NuxtLink>
112+
</template>
113+
</i18n-t>
114+
</p>
115+
</Modal>
116+
</div>
117+
<div class="flex items-center gap-5">
118+
<LinkBase :to="NPMX_DOCS_SITE">
119+
{{ $t('footer.docs') }}
120+
</LinkBase>
121+
<LinkBase to="https://repo.npmx.dev">
122+
{{ $t('footer.source') }}
123+
</LinkBase>
124+
<LinkBase to="https://social.npmx.dev">
125+
{{ $t('footer.social') }}
126+
</LinkBase>
127+
<LinkBase to="https://chat.npmx.dev">
128+
{{ $t('footer.chat') }}
129+
</LinkBase>
130+
</div>
128131
</div>
129132
</div>
130-
<BuildEnvironment v-if="!isHome" footer />
131133
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
132134
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
133135
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>

0 commit comments

Comments
 (0)