fix: sidebar behaviour when switching package/version

This commit is contained in:
iCrawl
2025-05-15 17:11:47 +02:00
parent 14e226b72b
commit c92a8c27a2
18 changed files with 377 additions and 208 deletions

View File

@@ -1,26 +1,27 @@
'use client';
import { useParams, useRouter } from 'next/navigation';
import { use } from 'react';
import { Select, SelectList, SelectOption, SelectTrigger } from './ui/Select';
import { Select, SelectList, SelectOption, SelectTrigger } from '@/components/ui/Select';
import { DEFAULT_ENTRY_POINT, PACKAGES_WITH_ENTRY_POINTS } from '@/util/constants';
export function VersionSelect({
versionsPromise,
}: {
readonly versionsPromise: Promise<{ readonly version: string }[]>;
}) {
export function VersionSelect({ versions }: { readonly versions: { readonly version: string }[] }) {
const router = useRouter();
const params = useParams();
const versions = use(versionsPromise);
const params = useParams<{ packageName: string; version: string }>();
const hasEntryPoints = PACKAGES_WITH_ENTRY_POINTS.includes(params.packageName);
return (
<Select aria-label="Select a version" defaultSelectedKey={params.version as string}>
<Select
aria-label="Select a version"
defaultSelectedKey={params.version}
key={`${params.packageName}-${params.version}`}
>
<SelectTrigger className="bg-[#f3f3f4] dark:bg-[#121214]" />
<SelectList classNames={{ popover: 'bg-[#f3f3f4] dark:bg-[#28282d]' }} items={versions}>
{(item) => (
<SelectOption
className="dark:pressed:bg-[#313135] bg-[#f3f3f4] dark:bg-[#28282d] dark:hover:bg-[#313135]"
href={`/docs/packages/${params.packageName}/${item.version}`}
href={`/docs/packages/${params.packageName}/${item.version}${hasEntryPoints ? ['', ...DEFAULT_ENTRY_POINT].join('/') : ''}`}
id={item.version}
key={item.version}
onHoverStart={() => router.prefetch(`/docs/packages/${params.packageName}/${item.version}`)}