fix: pin the sidebar only when necessary

Author: thasmo

app/components/Package/Sidebar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const viewport = useWindowSize()
+const scroll = useWindowScroll()
+const container = useTemplateRef<HTMLDivElement>('container')
+const content = useTemplateRef<HTMLDivElement>('content')
+const bounds = useElementBounding(content)
+
+const active = computed(() => {
+  return bounds.height.value > viewport.height.value
+})
+
+const direction = computed((previous = 'up'): string => {
+  if (!active.value) return previous
+  return scroll.directions.bottom ? 'down' : scroll.directions.top ? 'up' : previous
+})
+
+const offset = computed(() => {
+  if (!active.value) return 0
+  if (!container.value) return 0
+  if (!content.value) return 0
+
+  return direction.value === 'down'
+    ? content.value.offsetTop
+    : container.value.offsetHeight - content.value.offsetTop - content.value.offsetHeight
+})
+
+const style = computed(() => {
+  return direction.value === 'down'
+    ? { paddingBlockStart: `${offset.value}px` }
+    : { paddingBlockEnd: `${offset.value}px` }
+})
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="group relative data-[active=true]:flex"
+    :data-direction="direction"
+    :data-active="active"
+    :style="style"
+  >
+    <div
+      ref="content"
+      class="sticky w-full group-data-[direction=up]:(self-start top-30 xl:top-14) group-data-[direction=down]:(self-end bottom-8)"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -1144,11 +1144,9 @@ onKeyStroke(
           </div>
         </section>
       </section>
-      <div class="area-sidebar">
-        <!-- 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)]) pt-1"
-        >
+
+      <PackageSidebar class="area-sidebar">
+        <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
             <PackageAccessControls :package-name="pkg.name" />
@@ -1208,7 +1206,7 @@ onKeyStroke(
           <!-- Maintainers (with admin actions when connected) -->
           <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
         </div>
-      </div>
+      </PackageSidebar>
     </article>
 
     <!-- Error state -->
@@ -1302,41 +1300,6 @@ onKeyStroke(
   grid-area: sidebar;
 }
 
-/* Sidebar scrollbar: hidden by default, shown on hover/focus */
-@media (min-width: 1024px) {
-  .sidebar-scroll {
-    scrollbar-gutter: stable;
-    scrollbar-width: 8px;
-    scrollbar-color: transparent transparent;
-  }
-
-  .sidebar-scroll::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .sidebar-scroll::-webkit-scrollbar-track,
-  .sidebar-scroll::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
-
-  .sidebar-scroll:hover,
-  .sidebar-scroll:focus-within {
-    scrollbar-color: var(--border) transparent;
-  }
-
-  .sidebar-scroll:hover::-webkit-scrollbar-thumb,
-  .sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
-    background-color: var(--border);
-    border-radius: 9999px;
-  }
-
-  .sidebar-scroll:hover::-webkit-scrollbar-track,
-  .sidebar-scroll:focus-within::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
-
 /* Improve package name wrapping for narrow screens */
 .area-header h1 {
   overflow-wrap: anywhere;

test/nuxt/a11y.spec.ts

@@ -127,6 +127,7 @@ import {
   PackageMetricsBadges,
   PackagePlaygrounds,
   PackageReplacement,
+  PackageSidebar,
   PackageSkeleton,
   PackageSkillsCard,
   PackageTable,
@@ -2028,6 +2029,18 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageSidebar', () => {
+    it('should have no accessibility violations with slot content', async () => {
+      const component = await mountSuspended(PackageSidebar, {
+        slots: {
+          default: () => h('div', 'Sidebar content'),
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageSkillsCard', () => {
     it('should have no accessibility violations with skills', async () => {
       const component = await mountSuspended(PackageSkillsCard, {

test/nuxt/components/PackageSidebar.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { ref, reactive } from 'vue'
+import Sidebar from '~/components/Package/Sidebar.vue'
+import type * as vueuse from '@vueuse/core'
+
+const mockViewportHeight = ref(1000)
+const mockContentHeight = ref(500)
+const mockScrollDirections = reactive({ top: false, bottom: false, left: false, right: false })
+
+vi.mock('@vueuse/core', async importOriginal => {
+  const original = await importOriginal<typeof vueuse>()
+
+  return {
+    ...original,
+    useWindowSize: () => ({ width: ref(1024), height: mockViewportHeight }),
+    useWindowScroll: () => ({ x: ref(0), y: ref(0), directions: mockScrollDirections }),
+    useElementBounding: () => ({ height: mockContentHeight, update: vi.fn() }),
+  }
+})
+
+describe('Sidebar', () => {
+  beforeEach(() => {
+    mockViewportHeight.value = 1000
+    mockContentHeight.value = 500
+    mockScrollDirections.top = false
+    mockScrollDirections.bottom = false
+  })
+
+  it('renders slot content', async () => {
+    const wrapper = await mountSuspended(Sidebar, {
+      slots: {
+        default: () => 'Sidebar Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Sidebar Content')
+  })
+
+  it('sets active=false when content is shorter than viewport', async () => {
+    const wrapper = await mountSuspended(Sidebar)
+
+    expect(wrapper.attributes('data-active')).toBe('false')
+  })
+
+  it('updates state when viewport changes', async () => {
+    const wrapper = await mountSuspended(Sidebar)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.attributes('data-active')).toBe('false')
+
+    mockViewportHeight.value = 400
+
+    // expect(wrapper.attributes('data-active')).toBe('true')
+  })
+
+  it('renders with default states', async () => {
+    const wrapper = await mountSuspended(Sidebar)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.attributes('data-direction')).toBe('up')
+  })
+})