forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
chore(ui): consistent back navigation (#1164)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
abeer0
Daniel Roe
and committed by
GitHub
5f9ef8f6
4fa72f1a
+19
-4
+11
app/composables/useCanGoBack.ts
+11
app/composables/useCanGoBack.ts
+2
-1
app/pages/about.vue
+2
-1
app/pages/about.vue
···
1
1
<script setup lang="ts">
2
2
const router = useRouter()
3
+
const canGoBack = useCanGoBack()
3
4
4
5
interface GitHubContributor {
5
6
login: string
···
53
54
type="button"
54
55
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
55
56
@click="router.back()"
56
-
v-show="router.options.history.state.back !== null"
57
+
v-if="canGoBack"
57
58
>
58
59
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
59
60
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+2
-1
app/pages/compare.vue
+2
-1
app/pages/compare.vue
···
7
7
})
8
8
9
9
const router = useRouter()
10
+
const canGoBack = useCanGoBack()
10
11
11
12
// Sync packages with URL query param (stable ref - doesn't change on other query changes)
12
13
const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
···
118
119
type="button"
119
120
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
120
121
@click="router.back()"
121
-
v-show="router.options.history.state.back !== null"
122
+
v-if="canGoBack"
122
123
>
123
124
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
124
125
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+2
-1
app/pages/privacy.vue
+2
-1
app/pages/privacy.vue
···
14
14
})
15
15
16
16
const router = useRouter()
17
+
const canGoBack = useCanGoBack()
17
18
const buildInfo = useAppConfig().buildInfo
18
19
const { locale } = useI18n()
19
20
</script>
···
30
31
type="button"
31
32
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
32
33
@click="router.back()"
33
-
v-show="router.options.history.state.back !== null"
34
+
v-if="canGoBack"
34
35
>
35
36
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
36
37
<span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+2
-1
app/pages/settings.vue
+2
-1
app/pages/settings.vue
···
1
1
<script setup lang="ts">
2
2
const router = useRouter()
3
+
const canGoBack = useCanGoBack()
3
4
const { settings } = useSettings()
4
5
const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
5
6
const colorMode = useColorMode()
···
52
53
type="button"
53
54
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
54
55
@click="router.back()"
55
-
v-show="router.options.history.state.back !== null"
56
+
v-if="canGoBack"
56
57
>
57
58
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
58
59
<span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>