forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: scroll to bottom should show footer (#1352)
authored by
Axel Uriel Martínez Castillo
and committed by
GitHub
344fd65b
5928d543
+45
-1
+45
-1
app/pages/package/[[org]]/[name].vue
+45
-1
app/pages/package/[[org]]/[name].vue
···
28
28
29
29
const header = useTemplateRef('header')
30
30
const isHeaderPinned = shallowRef(false)
31
+
const navExtraOffset = shallowRef(0)
32
+
const isMobile = useMediaQuery('(max-width: 639.9px)')
31
33
32
34
function checkHeaderPosition() {
33
35
const el = header.value
···
43
45
useEventListener('scroll', checkHeaderPosition, { passive: true })
44
46
useEventListener('resize', checkHeaderPosition)
45
47
48
+
const footerTarget = ref<HTMLElement | null>(null)
49
+
const footerThresholds = Array.from({ length: 11 }, (_, i) => i / 10)
50
+
51
+
const { pause: pauseFooterObserver, resume: resumeFooterObserver } = useIntersectionObserver(
52
+
footerTarget,
53
+
([entry]) => {
54
+
if (!entry) return
55
+
56
+
navExtraOffset.value = entry.isIntersecting ? entry.intersectionRect.height : 0
57
+
},
58
+
{
59
+
threshold: footerThresholds,
60
+
immediate: false,
61
+
},
62
+
)
63
+
64
+
function initFooterObserver() {
65
+
footerTarget.value = document.querySelector('footer')
66
+
if (!footerTarget.value) return
67
+
68
+
pauseFooterObserver()
69
+
70
+
watch(
71
+
isMobile,
72
+
value => {
73
+
if (value) {
74
+
resumeFooterObserver()
75
+
} else {
76
+
pauseFooterObserver()
77
+
navExtraOffset.value = 0
78
+
}
79
+
},
80
+
{ immediate: true },
81
+
)
82
+
}
83
+
46
84
onMounted(() => {
47
85
checkHeaderPosition()
86
+
initFooterObserver()
48
87
})
88
+
89
+
const navExtraOffsetStyle = computed(() => ({
90
+
'--package-nav-extra': `${navExtraOffset.value}px`,
91
+
}))
49
92
50
93
const { packageName, requestedVersion, orgName } = usePackageRoute()
51
94
const selectedPM = useSelectedPackageManager()
···
663
706
as="nav"
664
707
:aria-label="$t('package.navigation')"
665
708
class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-1/2 max-sm:-translate-x-1/2 max-sm:rtl:translate-x-1/2 max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
709
+
:style="navExtraOffsetStyle"
666
710
:class="$style.packageNav"
667
711
>
668
712
<LinkBase
···
1475
1519
/* Mobile floating nav: safe-area positioning + kbd hiding */
1476
1520
@media (max-width: 639.9px) {
1477
1521
.packageNav {
1478
-
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
1522
+
bottom: calc(1.25rem + var(--package-nav-extra, 0px) + env(safe-area-inset-bottom, 0px));
1479
1523
}
1480
1524
1481
1525
.packageNav > :global(a kbd) {