refactor: website components (#8600)

packages/website/src/components/SidebarLayout.tsx

@@ -1,41 +1,20 @@
 import type { getMembers, ApiItemJSON } from '@discordjs/api-extractor-utils';
-import {
-	useMantineTheme,
-	AppShell,
-	Navbar,
-	MediaQuery,
-	Header,
-	Burger,
-	Anchor,
-	Breadcrumbs,
-	ScrollArea,
-	Group,
-	Text,
-	ThemeIcon,
-	Box,
-	UnstyledButton,
-	createStyles,
-	Menu,
-	ActionIcon,
-	useMantineColorScheme,
-	Stack,
-	Skeleton,
-	LoadingOverlay,
-	Container,
-	Title,
-} from '@mantine/core';
-import { NextLink } from '@mantine/next';
+import { Button } from 'ariakit/button';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import Image from 'next/future/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
-import { type PropsWithChildren, useState, useEffect, useMemo } from 'react';
-import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
-import { WiDaySunny, WiNightClear } from 'react-icons/wi';
+import { useTheme } from 'next-themes';
+import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { VscChevronDown, VscColorMode, VscGithubInverted, VscMenu, VscPackage, VscVersions } from 'react-icons/vsc';
+import { useMedia /* useLockBodyScroll */ } from 'react-use';
 import useSWR from 'swr';
+import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SidebarItems } from './SidebarItems';
+import { PACKAGES } from '~/util/constants';
 import type { findMember } from '~/util/model.server';
-import { PACKAGES } from '~/util/packages';
 
 const fetcher = async (url: string) => {
 	const res = await fetch(url);
@@ -66,89 +45,6 @@ export interface GroupedMembers {
 	Variables: Members;
 }
 
-const useStyles = createStyles(
-	(theme, { openedLib, openedVersion }: { openedLib: boolean; openedVersion: boolean }) => ({
-		control: {
-			display: 'block',
-			width: '100%',
-			padding: theme.spacing.xs,
-			color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
-			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![1],
-			borderRadius: theme.radius.xs,
-
-			'&:hover': {
-				backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![5] : theme.colors.gray![2],
-				color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-			},
-		},
-
-		iconLib: {
-			transition: 'transform 150ms ease',
-			transform: openedLib ? 'rotate(180deg)' : 'rotate(0deg)',
-		},
-
-		iconVersion: {
-			transition: 'transform 150ms ease',
-			transform: openedVersion ? 'rotate(180deg)' : 'rotate(0deg)',
-		},
-
-		content: {
-			position: 'relative',
-			minHeight: 'calc(100vh - 50px)',
-			zIndex: 1,
-			background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
-			boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-		},
-
-		footer: {
-			position: 'fixed',
-			bottom: 0,
-			left: 0,
-			right: 0,
-			height: 200,
-			background: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0],
-			paddingLeft: 324,
-
-			[theme.fn.smallerThan('lg')]: {
-				paddingRight: 54,
-			},
-
-			[theme.fn.smallerThan('md')]: {
-				paddingLeft: 24,
-			},
-
-			[theme.fn.smallerThan('sm')]: {
-				paddingRight: 24,
-				height: 300,
-			},
-		},
-
-		links: {
-			display: 'flex',
-			justifyContent: 'space-between',
-
-			[theme.fn.smallerThan('sm')]: {
-				flexDirection: 'column',
-				alignItems: 'center',
-				gap: 50,
-			},
-		},
-
-		link: { color: theme.colorScheme === 'dark' ? theme.white : theme.black },
-	}),
-);
-
-const packageMenuItems = PACKAGES.map((pkg) => (
-	<Menu.Item
-		key={pkg}
-		component={NextLink}
-		href={`/docs/packages/${pkg}/main`}
-		sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
-	>
-		{pkg}
-	</Menu.Item>
-));
-
 export function SidebarLayout({
 	packageName,
 	branchName,
@@ -157,261 +53,244 @@ export function SidebarLayout({
 }: PropsWithChildren<Partial<SidebarLayoutProps>>) {
 	const router = useRouter();
 	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
-	const { data: versions } = useSWR<string[]>(
-		`https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`,
-		fetcher,
-	);
-	const theme = useMantineTheme();
-	// eslint-disable-next-line @typescript-eslint/unbound-method
-	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
+	const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+	const matches = useMedia('(min-width: 992px)', false);
 	const [opened, setOpened] = useState(false);
-	const [openedLibPicker, setOpenedLibPicker] = useState(false);
-	const [openedVersionPicker, setOpenedVersionPicker] = useState(false);
+	const packageMenu = useMenuState({ gutter: 8, sameWidth: true });
+	const versionMenu = useMenuState({ gutter: 8, sameWidth: true });
+	// useLockBodyScroll(opened);
 
 	useEffect(() => {
-		setOpened(false);
-		setOpenedLibPicker(false);
-		setOpenedVersionPicker(false);
-	}, []);
+		if (matches) {
+			setOpened(false);
+		}
+	}, [matches]);
 
 	useEffect(() => {
 		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
 	}, [router.asPath]);
 
-	const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
+	const packageMenuItems = PACKAGES.map((pkg) => (
+		<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
+			<MenuItem
+				className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+				as="a"
+				state={packageMenu}
+			>
+				{pkg}
+			</MenuItem>
+		</Link>
+	));
 
 	const versionMenuItems = useMemo(
 		() =>
-			versions?.map((item) => (
-				<Menu.Item
-					key={item}
-					component={NextLink}
-					href={`/docs/packages/${packageName ?? 'builders'}/${item}`}
-					sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
-				>
-					{item}
-				</Menu.Item>
-			)) ?? [],
+			versions
+				?.map((item) => (
+					<Link key={item} href={`/docs/packages/${packageName}/${item}`} passHref prefetch={false}>
+						<MenuItem
+							className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+							as="a"
+							state={versionMenu}
+						>
+							{item}
+						</MenuItem>
+					</Link>
+				))
+				.reverse() ?? [],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[versions, packageName],
 	);
 
-	const breadcrumbs = useMemo(
+	const pathElements = useMemo(
 		() =>
 			asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
-				<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref prefetch={false}>
-					<Anchor component="a" sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}>
-						{path}
-					</Anchor>
+				<Link key={idx} href={original.slice(0, idx + 1).join('/')} prefetch={false}>
+					<a className="hover:underline">{path}</a>
 				</Link>
 			)),
 		[asPathWithoutQueryAndAnchor],
 	);
 
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={idx}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={idx}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
 	return (
-		<AppShell
-			sx={(theme) => ({
-				main: {
-					background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
-					overflowX: 'auto',
-				},
-			})}
-			padding={0}
-			navbarOffsetBreakpoint="md"
-			asideOffsetBreakpoint="md"
-			navbar={
-				<>
-					<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-						<LoadingOverlay
-							sx={{ position: 'fixed', top: 70, width: 300 }}
-							visible={router.isFallback}
-							overlayBlur={2}
-						/>
-					</MediaQuery>
-					<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
-						{packageName && data ? (
-							<>
-								<Navbar.Section p="xs">
-									<Stack spacing="xs">
-										<Menu
-											onOpen={() => setOpenedLibPicker(true)}
-											onClose={() => setOpenedLibPicker(false)}
-											radius="sm"
-											width="target"
-										>
-											<Menu.Target>
-												<UnstyledButton className={classes.control}>
-													<Group position="apart">
-														<Group>
-															<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
-																<VscPackage size={20} />
-															</ThemeIcon>
-															<Text weight="600" size="md">
-																{packageName}
-															</Text>
-														</Group>
-														<VscChevronDown className={classes.iconLib} size={20} />
-													</Group>
-												</UnstyledButton>
-											</Menu.Target>
-											<Menu.Dropdown>{packageMenuItems}</Menu.Dropdown>
-										</Menu>
-
-										<Menu
-											onOpen={() => setOpenedVersionPicker(true)}
-											onClose={() => setOpenedVersionPicker(false)}
-											radius="sm"
-											width="target"
-										>
-											<Menu.Target>
-												<UnstyledButton className={classes.control}>
-													<Group position="apart">
-														<Group>
-															<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
-																<VscVersions size={20} />
-															</ThemeIcon>
-															<Text weight="600" size="md">
-																{branchName}
-															</Text>
-														</Group>
-														<VscChevronDown className={classes.iconVersion} size={20} />
-													</Group>
-												</UnstyledButton>
-											</Menu.Target>
-											<Menu.Dropdown>{versionMenuItems}</Menu.Dropdown>
-										</Menu>
-									</Stack>
-								</Navbar.Section>
-
-								<Navbar.Section px="xs" pb="xs" grow component={ScrollArea}>
-									<SidebarItems members={data.members} setOpened={setOpened} />
-								</Navbar.Section>
-							</>
-						) : null}
-					</Navbar>
-				</>
-			}
-			header={
-				<Header
-					sx={(theme) => ({
-						boxShadow:
-							theme.colorScheme === 'dark'
-								? '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
-								: 'unset',
-					})}
-					height={70}
-					p="md"
+		<>
+			<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+				<div className="h-18 block px-6">
+					<div className="flex h-full flex-row place-content-between place-items-center">
+						<Button
+							className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px lg:hidden"
+							onClick={() => setOpened((open) => !open)}
+						>
+							<VscMenu size={24} />
+						</Button>
+						<div className="hidden md:flex md:flex-row">{breadcrumbs}</div>
+						<div className="flex flex-row gap-4">
+							<Button
+								as="a"
+								className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px"
+								href="https://github.com/discordjs/discord.js"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<VscGithubInverted size={24} />
+							</Button>
+							<Button
+								className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px"
+								role="button"
+								onClick={() => toggleTheme()}
+							>
+								<VscColorMode size={24} />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</header>
+			<nav
+				className={`h-[calc(100vh - 73px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 w-full border-r bg-white ${
+					opened ? 'block' : 'hidden'
+				} lg:w-76 lg:max-w-76 lg:block`}
+			>
+				<Scrollbars
+					universal
+					autoHide
+					hideTracksWhenNotNeeded
+					renderTrackVertical={(props) => (
+						<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+					)}
+					renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
 				>
-					<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
-						<Box>
-							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
-								<Burger
-									opened={opened}
-									onClick={() => (router.isFallback ? null : setOpened((isOpened) => !isOpened))}
-									size="sm"
-									color={theme.colors.gray![6]}
-									mr="xl"
+					<div className="flex flex-col gap-3 px-3 pt-3">
+						<MenuButton
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+							state={packageMenu}
+						>
+							<div className="flex flex-row place-content-between place-items-center">
+								<div className="flex flex-row place-items-center gap-3">
+									<VscPackage size={20} />
+									<span className="font-semibold">{packageName}</span>
+								</div>
+								<VscChevronDown
+									className={`transform transition duration-150 ease-in-out ${
+										packageMenu.open ? 'rotate-180' : 'rotate-0'
+									}`}
+									size={20}
 								/>
-							</MediaQuery>
+							</div>
+						</MenuButton>
+						<Menu
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 rounded border bg-white p-1"
+							state={packageMenu}
+						>
+							{packageMenuItems}
+						</Menu>
 
-							<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-								<Skeleton visible={router.isFallback} radius="sm">
-									<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
-								</Skeleton>
-							</MediaQuery>
-						</Box>
-						<Group>
-							<Link href="https://github.com/discordjs/discord.js" passHref prefetch={false}>
-								<ActionIcon
-									component="a"
+						<MenuButton
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+							state={versionMenu}
+						>
+							<div className="flex flex-row place-content-between place-items-center">
+								<div className="flex flex-row place-items-center gap-3">
+									<VscVersions size={20} />
+									<span className="font-semibold">{branchName}</span>
+								</div>
+								<VscChevronDown
+									className={`transform transition duration-150 ease-in-out ${
+										versionMenu.open ? 'rotate-180' : 'rotate-0'
+									}`}
+									size={20}
+								/>
+							</div>
+						</MenuButton>
+						<Menu
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 rounded border bg-white p-1"
+							state={versionMenu}
+						>
+							{versionMenuItems}
+						</Menu>
+					</div>
+
+					<SidebarItems members={data?.members ?? []} setOpened={setOpened} />
+				</Scrollbars>
+			</nav>
+			<main
+				className={`pt-18 lg:pl-76 ${
+					data?.member?.kind === 'Class' || data?.member?.kind === 'Interface' ? 'xl:pr-64' : ''
+				}`}
+			>
+				<article className="dark:bg-dark-600 bg-light-600">
+					<div className="min-h-[calc(100vh - 50px)] dark:bg-dark-800 relative z-10 bg-white p-6 pb-20 shadow">
+						{children}
+					</div>
+					<div className="h-76 md:h-52" />
+					<footer
+						className={`dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16 ${
+							data?.member?.kind === 'Class' || data?.member?.kind === 'Interface' ? 'xl:pr-76' : 'xl:pr-16'
+						}`}
+					>
+						<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+							<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+								<a
+									href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
 									target="_blank"
 									rel="noopener noreferrer"
-									variant="transparent"
-									color="dark"
-									title="GitHub repository"
+									title="Vercel"
 								>
-									<VscGithubInverted size={20} />
-								</ActionIcon>
-							</Link>
-							<ActionIcon
-								variant="subtle"
-								color={colorScheme === 'dark' ? 'yellow' : 'blue'}
-								onClick={() => toggleColorScheme()}
-								title="Toggle color scheme"
-								radius="sm"
-							>
-								{colorScheme === 'dark' ? <WiDaySunny size={30} /> : <WiNightClear size={30} />}
-							</ActionIcon>
-						</Group>
-					</Box>
-				</Header>
-			}
-		>
-			<article>
-				<Box className={classes.content} p="lg" pb={80}>
-					{children}
-				</Box>
-				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })} />
-				<Box
-					component="footer"
-					sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 54 : 324 }}
-					className={classes.footer}
-					pt={50}
-				>
-					<Container>
-						<Box className={classes.links}>
-							<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" prefetch={false}>
-								<a title="Vercel">
-									<Image
-										src="/powered-by-vercel.svg"
-										alt="Vercel"
-										width={0}
-										height={0}
-										style={{ height: '100%', width: '100%', maxWidth: 200 }}
-									/>
+									<Image src={vercelLogo} alt="Vercel" />
 								</a>
-							</Link>
-							<Group sx={(theme) => ({ gap: 50, [theme.fn.smallerThan('sm')]: { gap: 25 } })} align="flex-start">
-								<Stack spacing={8}>
-									<Title order={4}>Community</Title>
-									<Stack spacing={0}>
-										<Link href="https://discord.gg/djs" passHref prefetch={false}>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
+								<div className="flex flex-row gap-6 md:gap-12">
+									<div className="flex flex-col gap-2">
+										<h4 className="text-lg font-semibold">Community</h4>
+										<div className="flex flex-col gap-1">
+											<a href="https://discord.gg/djs" target="_blank" rel="noopener noreferrer">
 												Discord
-											</Anchor>
-										</Link>
-										<Link href="https://github.com/discordjs/discord.js/discussions" passHref prefetch={false}>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
+											</a>
+											<a
+												href="https://github.com/discordjs/discord.js/discussions"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
 												GitHub discussions
-											</Anchor>
-										</Link>
-									</Stack>
-								</Stack>
-								<Stack spacing={8}>
-									<Title order={4}>Project</Title>
-									<Stack spacing={0}>
-										<Link href="https://github.com/discordjs/discord.js" passHref prefetch={false}>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
+											</a>
+										</div>
+									</div>
+									<div className="flex flex-col gap-2">
+										<h4 className="text-lg font-semibold">Project</h4>
+										<div className="flex flex-col gap-1">
+											<a href="https://github.com/discordjs/discord.js" target="_blank" rel="noopener noreferrer">
 												discord.js
-											</Anchor>
-										</Link>
-										<Link href="https://discordjs.guide" passHref prefetch={false}>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
+											</a>
+											<a href="https://discordjs.guide" target="_blank" rel="noopener noreferrer">
 												discord.js guide
-											</Anchor>
-										</Link>
-										<Link href="https://discord-api-types.dev" passHref prefetch={false}>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
+											</a>
+											<a href="https://discord-api-types.dev" target="_blank" rel="noopener noreferrer">
 												discord-api-types
-											</Anchor>
-										</Link>
-									</Stack>
-								</Stack>
-							</Group>
-						</Box>
-					</Container>
-				</Box>
-			</article>
-		</AppShell>
+											</a>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</footer>
+				</article>
+			</main>
+		</>
 	);
 }