Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: sidebar behaviour when switching package/version

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/website/src/components/Navigation.tsx
View File

@@ -1,26 +1,38 @@
'use client';
import { useQuery } from '@tanstack/react-query';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { notFound } from 'next/navigation';
import { fetchSitemap } from '@/util/fetchSitemap';
import { notFound, useParams } from 'next/navigation';
import { parseDocsPathParams } from '@/util/parseDocsPathParams';
import { resolveNodeKind } from './DocKind';
import { NavigationItem } from './NavigationItem';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/Collapsible';
export async function Navigation({
entryPoint,
packageName,
version,
}: {
readonly entryPoint?: string | undefined;
readonly packageName: string;
readonly version: string;
}) {
const node = await fetchSitemap({ entryPoint, packageName, version });
export function Navigation() {
const params = useParams<{
item?: string[] | undefined;
packageName: string;
version: string;
}>();
if (!node) {
const { entryPoints: parsedEntrypoints } = parseDocsPathParams(params.item);
const { data: node, status } = useQuery({
queryKey: ['sitemap', params.packageName, params.version, parsedEntrypoints.join('.')],
queryFn: async () => {
const response = await fetch(
`/api/docs/sitemap?packageName=${params.packageName}&version=${params.version}&entryPoint=${parsedEntrypoints.join('.')}`,
);
return response.json();
},
});
if ((status === 'success' && !node) || status === 'error') {
notFound();
}
const groupedNodes = node.reduce((acc: any, node: any) => {
const groupedNodes = node?.reduce((acc: any, node: any) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
(acc[node.kind.toLowerCase()] ||= []).push(node);
return acc;
@@ -28,7 +40,7 @@ export async function Navigation({
return (
<nav className="flex flex-col gap-2 pr-3">
{groupedNodes.class?.length ? (
{groupedNodes?.class?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Classes</h4>
@@ -40,7 +52,12 @@ export async function Navigation({
{groupedNodes.class.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}
@@ -53,7 +70,7 @@ export async function Navigation({
</Collapsible>
) : null}
{groupedNodes.function?.length ? (
{groupedNodes?.function?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Functions</h4>
@@ -65,7 +82,12 @@ export async function Navigation({
{groupedNodes.function.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}
@@ -78,7 +100,7 @@ export async function Navigation({
</Collapsible>
) : null}
{groupedNodes.enum?.length ? (
{groupedNodes?.enum?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Enums</h4>
@@ -90,7 +112,12 @@ export async function Navigation({
{groupedNodes.enum.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}
@@ -103,7 +130,7 @@ export async function Navigation({
</Collapsible>
) : null}
{groupedNodes.interface?.length ? (
{groupedNodes?.interface?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Interfaces</h4>
@@ -115,7 +142,12 @@ export async function Navigation({
{groupedNodes.interface.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}
@@ -128,7 +160,7 @@ export async function Navigation({
</Collapsible>
) : null}
{groupedNodes.typealias?.length ? (
{groupedNodes?.typealias?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Types</h4>
@@ -140,7 +172,12 @@ export async function Navigation({
{groupedNodes.typealias.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}
@@ -153,7 +190,7 @@ export async function Navigation({
</Collapsible>
) : null}
{groupedNodes.variable?.length ? (
{groupedNodes?.variable?.length ? (
<Collapsible className="flex flex-col gap-2" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-[#e7e7e9] dark:hover:bg-[#242428]">
<h4 className="font-semibold">Variables</h4>
@@ -165,7 +202,12 @@ export async function Navigation({
{groupedNodes.variable.map((node: any, idx: number) => {
const kind = resolveNodeKind(node.kind);
return (
<NavigationItem key={`${node.name}-${idx}`} node={node} packageName={packageName} version={version}>
<NavigationItem
key={`${node.name}-${idx}`}
node={node}
packageName={params.packageName}
version={params.version}
>
<div className={`inline-block h-6 w-6 rounded-full text-center ${kind.background} ${kind.text}`}>
{node.kind[0]}
</div>{' '}