feat: table of contents / method visibility / property modifiers

packages/website/src/components/SidebarLayout.tsx

@@ -3,7 +3,7 @@ import {
 	AppShell,
 	Navbar,
 	MediaQuery,
-	// Aside,
+	Aside,
 	Header,
 	Burger,
 	Anchor,
@@ -26,6 +26,8 @@ import { type PropsWithChildren, useState } from 'react';
 import { VscChevronDown, VscPackage } from 'react-icons/vsc';
 import { WiDaySunny, WiNightClear } from 'react-icons/wi';
 import { SidebarItems } from './SidebarItems';
+import { TableOfContentsItems } from './TableOfContentsItems';
+import type { DocClass } from '~/DocModel/DocClass';
 import type { DocItem } from '~/DocModel/DocItem';
 import type { findMember } from '~/util/model.server';
 import type { getMembers } from '~/util/parse.server';
@@ -59,7 +61,7 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
 
 		'&:hover': {
-			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0],
+			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
 			color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 		},
 	},
@@ -153,19 +155,21 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 					) : null}
 				</Navbar>
 			}
-			// aside={
-			// 	packageName && data?.member ? (
-			// 		<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-			// 			<Aside hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
-			// 				<ScrollArea p="xs">
-			// 					<SidebarItems members={data.members} />
-			// 				</ScrollArea>
-			// 			</Aside>
-			// 		</MediaQuery>
-			// 	) : (
-			// 		<></>
-			// 	)
-			// }
+			aside={
+				packageName && data?.member && data.member.kind === 'Class' ? (
+					<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+						<Aside hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
+							<ScrollArea p="xs">
+								<TableOfContentsItems
+									members={(data.member as unknown as ReturnType<DocClass['toJSON']>).methods}
+								></TableOfContentsItems>
+							</ScrollArea>
+						</Aside>
+					</MediaQuery>
+				) : (
+					<></>
+				)
+			}
 			// footer={
 			// 	<Footer height={60} p="md">
 			// 		Application footer
@@ -195,7 +199,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 							onClick={() => toggleColorScheme()}
 							title="Toggle color scheme"
 						>
-							{dark ? <WiDaySunny size={18} /> : <WiNightClear size={18} />}
+							{dark ? <WiDaySunny size={20} /> : <WiNightClear size={20} />}
 						</ActionIcon>
 					</Box>
 				</Header>