refactor: inline table of contents

packages/website/src/components/DocContainer.tsx

@@ -1,4 +1,4 @@
-import { Group, Stack, Title, Text, Box } from '@mantine/core';
+import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import type { ReactNode } from 'react';
 import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
@@ -6,8 +6,10 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
+import { TableOfContentsItems } from './TableOfContentsItems';
 import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
+import type { DocClass } from '~/DocModel/DocClass';
 import type { DocItem } from '~/DocModel/DocItem';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
 import { generateIcon } from '~/util/icon';
@@ -23,6 +25,7 @@ export interface DocContainerProps {
 	implementsTokens?: TokenDocumentation[][];
 	typeParams?: TypeParameterData[];
 	comment?: AnyDocNodeJSON | null;
+	methods?: ReturnType<DocClass['toJSON']>['methods'] | null;
 }
 
 export function DocContainer({
@@ -34,68 +37,85 @@ export function DocContainer({
 	children,
 	extendsTokens,
 	implementsTokens,
+	methods,
 }: DocContainerProps) {
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return (
-		<Stack>
-			<Title order={2} ml="xs" className="break-all">
-				<Group>
-					{generateIcon(kind)}
-					{name}
-				</Group>
-			</Title>
+		<Group>
+			<Stack sx={{ flexGrow: 1 }}>
+				<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
+					<Group>
+						{generateIcon(kind)}
+						{name}
+					</Group>
+				</Title>
 
-			<Section title="Summary" icon={<VscListSelection />} padded dense={matches}>
-				{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
-			</Section>
+				<Section title="Summary" icon={<VscListSelection />} padded dense={matches}>
+					{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
+				</Section>
 
-			<Box px="xs" pb="xs">
-				<SyntaxHighlighter
-					wrapLongLines
-					language="typescript"
-					style={vscDarkPlus}
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-				>
-					{excerpt}
-				</SyntaxHighlighter>
-			</Box>
+				<Box px="xs" pb="xs">
+					<SyntaxHighlighter
+						wrapLongLines
+						language="typescript"
+						style={vscDarkPlus}
+						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					>
+						{excerpt}
+					</SyntaxHighlighter>
+				</Box>
 
-			{extendsTokens?.length ? (
-				<Group noWrap>
-					<Title order={3} ml="xs">
-						Extends
-					</Title>
-					<Text className="font-mono break-all">
-						<HyperlinkedText tokens={extendsTokens} />
-					</Text>
-				</Group>
-			) : null}
-
-			{implementsTokens?.length ? (
-				<Group noWrap>
-					<Title order={3} ml="xs">
-						Implements
-					</Title>
-					<Text className="font-mono break-all">
-						{implementsTokens.map((token, idx) => (
-							<>
-								<HyperlinkedText tokens={token} />
-								{idx < implementsTokens.length - 1 ? ', ' : ''}
-							</>
-						))}
-					</Text>
-				</Group>
-			) : null}
-
-			<Stack>
-				{typeParams?.length ? (
-					<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed>
-						<TypeParamTable data={typeParams} />
-					</Section>
+				{extendsTokens?.length ? (
+					<Group noWrap>
+						<Title order={3} ml="xs">
+							Extends
+						</Title>
+						<Text sx={{ wordBreak: 'break-all' }} className="font-mono">
+							<HyperlinkedText tokens={extendsTokens} />
+						</Text>
+					</Group>
 				) : null}
-				<Stack>{children}</Stack>
+
+				{implementsTokens?.length ? (
+					<Group noWrap>
+						<Title order={3} ml="xs">
+							Implements
+						</Title>
+						<Text sx={{ wordBreak: 'break-all' }} className="font-mono">
+							{implementsTokens.map((token, idx) => (
+								<>
+									<HyperlinkedText tokens={token} />
+									{idx < implementsTokens.length - 1 ? ', ' : ''}
+								</>
+							))}
+						</Text>
+					</Group>
+				) : null}
+
+				<Stack>
+					{typeParams?.length ? (
+						<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed>
+							<TypeParamTable data={typeParams} />
+						</Section>
+					) : null}
+					<Stack>{children}</Stack>
+				</Stack>
 			</Stack>
-		</Stack>
+			{kind === 'Class' && methods ? (
+				<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+					<Aside
+						sx={{ backgroundColor: 'transparent' }}
+						hiddenBreakpoint="md"
+						width={{ md: 200, lg: 300 }}
+						withBorder={false}
+					>
+						<ScrollArea p="xs">
+							<TableOfContentsItems members={methods}></TableOfContentsItems>
+						</ScrollArea>
+					</Aside>
+				</MediaQuery>
+			) : null}
+		</Group>
 	);
 }