feat: active navigation and back button

packages/website/src/components/Section.tsx

@@ -1,4 +1,13 @@
-import { createStyles, UnstyledButton, Group, ThemeIcon, Collapse, Box, Text } from '@mantine/core';
+import {
+	createStyles,
+	UnstyledButton,
+	Group,
+	ThemeIcon,
+	Collapse,
+	Box,
+	Text,
+	useMantineColorScheme,
+} from '@mantine/core';
 import { type ReactNode, useState } from 'react';
 import { VscChevronDown } from 'react-icons/vsc';
 
@@ -8,9 +17,11 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
 		width: '100%',
 		padding: theme.spacing.xs,
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
+		backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![7] : 'transparent',
+		borderRadius: theme.radius.xs,
 
 		'&:hover': {
-			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
+			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![5] : theme.colors.gray![2],
 			color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 		},
 	},
@@ -37,6 +48,7 @@ export function Section({
 	children: ReactNode;
 }) {
 	const [opened, setOpened] = useState(!defaultClosed);
+	const { colorScheme } = useMantineColorScheme();
 	const { classes } = useStyles({ opened });
 
 	return (
@@ -44,7 +56,11 @@ export function Section({
 			<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
 				<Group position="apart">
 					<Group>
-						{icon ? <ThemeIcon size={30}>{icon}</ThemeIcon> : null}
+						{icon ? (
+							<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
+								{icon}
+							</ThemeIcon>
+						) : null}
 						<Text weight={600} size="md">
 							{title}
 						</Text>

packages/website/src/components/SidebarItems.tsx

@@ -1,5 +1,6 @@
-import { createStyles, UnstyledButton, Group, Text } from '@mantine/core';
+import { createStyles, Group, Text, NavLink } from '@mantine/core';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import type { Dispatch, SetStateAction } from 'react';
 import {
 	VscSymbolClass,
@@ -69,6 +70,7 @@ const useStyles = createStyles((theme) => ({
 	link: {
 		fontWeight: 500,
 		display: 'block',
+		width: 'unset',
 		padding: 5,
 		paddingLeft: 31,
 		marginLeft: 25,
@@ -90,6 +92,7 @@ export function SidebarItems({
 	members: Members;
 	setOpened: Dispatch<SetStateAction<boolean>>;
 }) {
+	const router = useRouter();
 	const { classes } = useStyles();
 	const groupItems = groupMembers(members);
 
@@ -101,18 +104,25 @@ export function SidebarItems({
 					<Section key={idx} title={group} icon={resolveIcon(group)}>
 						{groupItems[group].map((member, i) => (
 							<Link key={i} href={member.path} passHref>
-								<UnstyledButton className={classes.link} component="a" onClick={() => setOpened((o) => !o)}>
+								<NavLink
-									<Group>
+									className={classes.link}
-										<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
+									component="a"
-											{member.name}
+									onClick={() => setOpened((o) => !o)}
-										</Text>
+									label={
-										{member.overloadIndex && member.overloadIndex > 1 ? (
+										<Group>
-											<Text size="xs" color="dimmed">
+											<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
-												{member.overloadIndex}
+												{member.name}
 											</Text>
-										) : null}
+											{member.overloadIndex && member.overloadIndex > 1 ? (
-									</Group>
+												<Text size="xs" color="dimmed">
-								</UnstyledButton>
+													{member.overloadIndex}
+												</Text>
+											) : null}
+										</Group>
+									}
+									active={router.asPath === member.path}
+									variant="filled"
+								></NavLink>
 							</Link>
 						))}
 					</Section>

packages/website/src/components/SidebarLayout.tsx

@@ -66,9 +66,11 @@ const useStyles = createStyles(
 			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![6] : theme.colors.gray![0],
+				backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![5] : theme.colors.gray![2],
 				color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 			},
 		},
@@ -163,7 +165,7 @@ export function SidebarLayout({
 											<UnstyledButton className={classes.control}>
 												<Group position="apart">
 													<Group>
-														<ThemeIcon size={30}>
+														<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 															<VscPackage size={20} />
 														</ThemeIcon>
 														<Text weight="600" size="md">
@@ -187,7 +189,7 @@ export function SidebarLayout({
 											<UnstyledButton className={classes.control}>
 												<Group position="apart">
 													<Group>
-														<ThemeIcon size={30}>
+														<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 															<VscVersions size={20} />
 														</ThemeIcon>
 														<Text weight="600" size="md">

packages/website/src/components/TableOfContentItems.tsx

@@ -1,4 +1,4 @@
-import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core';
+import { createStyles, Group, Text, Box, Stack, ThemeIcon, useMantineColorScheme } from '@mantine/core';
 import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
@@ -8,7 +8,7 @@ const useStyles = createStyles((theme) => ({
 		...theme.fn.focusStyles(),
 		display: 'block',
 		textDecoration: 'none',
-		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
+		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7],
 		lineHeight: 1.2,
 		fontSize: theme.fontSizes.sm,
 		padding: theme.spacing.xs,
@@ -17,6 +17,7 @@ const useStyles = createStyles((theme) => ({
 		borderTopRightRadius: theme.radius.sm,
 		borderBottomRightRadius: theme.radius.sm,
 		borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
+		fontWeight: 500,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -32,6 +33,7 @@ export function TableOfContentItems({
 	methods: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'];
 	properties: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'];
 }) {
+	const { colorScheme } = useMantineColorScheme();
 	const { classes } = useStyles();
 
 	const propertyItems = properties.map((prop) => (
@@ -73,7 +75,7 @@ export function TableOfContentItems({
 				{propertyItems.length ? (
 					<Box>
 						<Group>
-							<ThemeIcon size={30}>
+							<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 								<VscSymbolProperty size={20} />
 							</ThemeIcon>
 							<Box p="sm" pl={0}>
@@ -88,7 +90,7 @@ export function TableOfContentItems({
 				{methodItems.length ? (
 					<Box>
 						<Group spacing="xs">
-							<ThemeIcon size={30}>
+							<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 								<VscSymbolMethod size={20} />
 							</ThemeIcon>
 							<Box p="sm" pl={0}>

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -1,7 +1,20 @@
-import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack, Box, Title } from '@mantine/core';
+import {
+	Container,
+	UnstyledButton,
+	createStyles,
+	Group,
+	ThemeIcon,
+	Text,
+	Stack,
+	Box,
+	Title,
+	useMantineColorScheme,
+	Affix,
+} from '@mantine/core';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
-import { VscArrowRight, VscPackage } from 'react-icons/vsc';
+import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
 
 interface VersionProps {
 	packageName: string;
@@ -57,6 +70,7 @@ const useStyles = createStyles((theme) => ({
 	control: {
 		padding: theme.spacing.xs,
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
+		borderRadius: theme.radius.xs,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -66,7 +80,9 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export default function VersionsRoute(props: Partial<VersionProps> & { error?: string }) {
+	const router = useRouter();
 	const { classes } = useStyles();
+	const { colorScheme } = useMantineColorScheme();
 
 	return props.error ? (
 		<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
@@ -81,7 +97,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 						<UnstyledButton className={classes.control} component="a">
 							<Group position="apart">
 								<Group>
-									<ThemeIcon size={30}>
+									<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 										<VscPackage size={20} />
 									</ThemeIcon>
 									<Text weight={600} size="md">
@@ -94,6 +110,11 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 					</Link>
 				)) ?? null}
 			</Stack>
+			<Affix position={{ top: 20, left: 20 }}>
+				<UnstyledButton onClick={() => void router.push('/docs/packages')}>
+					<VscArrowLeft size={25} />
+				</UnstyledButton>
+			</Affix>
 		</Container>
 	);
 }

packages/website/src/pages/docs/packages/index.tsx

@@ -1,4 +1,14 @@
-import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack, Title } from '@mantine/core';
+import {
+	Container,
+	UnstyledButton,
+	createStyles,
+	Group,
+	ThemeIcon,
+	Text,
+	Stack,
+	Title,
+	useMantineColorScheme,
+} from '@mantine/core';
 import Link from 'next/link';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
 
@@ -6,6 +16,7 @@ const useStyles = createStyles((theme) => ({
 	control: {
 		padding: theme.spacing.xs,
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
+		borderRadius: theme.radius.xs,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -16,6 +27,8 @@ const useStyles = createStyles((theme) => ({
 
 export default function PackagesRoute() {
 	const { classes } = useStyles();
+	const { colorScheme } = useMantineColorScheme();
+
 	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
 
 	return (
@@ -29,7 +42,7 @@ export default function PackagesRoute() {
 						<UnstyledButton className={classes.control} component="a">
 							<Group position="apart">
 								<Group>
-									<ThemeIcon size={30}>
+									<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
 										<VscPackage size={20} />
 									</ThemeIcon>
 									<Text weight={600} size="md">