fix: pin the sidebar only when necessary

Author: thasmo

app/pages/package/[[org]]/[name].vue

@@ -47,6 +47,57 @@ onMounted(() => {
   checkHeaderPosition()
 })
 
+const windowSize = useWindowSize()
+const sidebar = useTemplateRef<HTMLDivElement>('sidebar')
+const sidebarContainer = useTemplateRef<HTMLDivElement>('container')
+const sidebarBounds = useElementBounding(sidebar)
+const scrollState = useWindowScroll()
+const scrollDirection = shallowRef<'up' | 'down'>('down')
+const sidebarOffset = shallowRef([0, 0])
+
+const sidebarOverflow = computed(() => {
+  return sidebarBounds.height.value > windowSize.height.value - 120
+})
+
+const sidebarStyles = computed(() => {
+  if (!sidebarOverflow.value) {
+    return {
+      alignSelf: 'flex-start',
+      top: '80px',
+    }
+  }
+
+  if (scrollDirection.value === 'down') {
+    return {
+      alignSelf: 'flex-end',
+      marginBlockStart: `${sidebarOffset.value[0]}px`,
+      bottom: '40px',
+    }
+  }
+
+  if (scrollDirection.value === 'up') {
+    return {
+      alignSelf: 'flex-start',
+      marginBlockEnd: `${sidebarOffset.value[1]}px`,
+      top: '80px',
+    }
+  }
+})
+
+watch(scrollState.directions, ({ bottom, top }) => {
+  if (bottom) scrollDirection.value = 'down'
+  if (top) scrollDirection.value = 'up'
+})
+
+function checkSidebarPosition() {
+  sidebarOffset.value = [
+    sidebar.value!.offsetTop,
+    sidebarContainer.value!.offsetHeight - sidebar.value!.offsetTop - sidebar.value!.offsetHeight,
+  ]
+}
+
+useEventListener('scroll', checkSidebarPosition, { passive: true })
+
 const { packageName, requestedVersion, orgName } = usePackageRoute()
 const selectedPM = useSelectedPackageManager()
 const activePmId = computed(() => selectedPM.value ?? 'npm')
@@ -1187,11 +1238,9 @@ onKeyStroke(
           </div>
         </section>
       </section>
-      <div class="area-sidebar">
+      <div ref="container" class="area-sidebar relative flex">
         <!-- Sidebar -->
-        <div
-          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
-        >
+        <div ref="sidebar" class="sticky w-full xl:(pt-2)" :style="sidebarStyles">
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
             <PackageAccessControls :package-name="pkg.name" />