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

feat: reintroduce outline navigation

Browse Source
This commit is contained in:
iCrawl
2023-11-13 18:03:23 +01:00
parent 7c935dc84b
commit bc8f83368a
21 changed files with 130 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/website/src/components/Outline.tsx
View File

@@ -1,23 +1,32 @@
'use client';
import { useOutline } from '~/contexts/outline';
import { Scrollbars } from './Scrollbars';
import type { TableOfContentsSerialized } from './TableOfContentItems';
import { TableOfContentItems } from './TableOfContentItems';
export function Outline({ members }: { readonly members: TableOfContentsSerialized[] }) {
export function Outline() {
const { members } = useOutline();
if (!members) {
return null;
}
return (
<aside className="fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l border-light-800 bg-white pr-2 xl:block dark:border-dark-100 dark:bg-dark-600">
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>
<TableOfContentItems serializedMembers={members} />
</Scrollbars>
</aside>
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
<aside className="fixed bottom-4 left-4 right-4 top-22 z-20 mx-auto hidden max-w-5xl border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md lg:sticky lg:block lg:h-full lg:max-w-xs lg:min-w-xs lg:w-full dark:border-dark-100 dark:bg-dark-600/75">
<Scrollbars
autoHide
className="[&>div]:overscroll-none"
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>
<TableOfContentItems serializedMembers={members} />
</Scrollbars>
</aside>
</div>
);
}