From f16b11a91d4b5878ef2025858818a8c55c027c15 Mon Sep 17 00:00:00 2001 From: iCrawl Date: Tue, 23 Aug 2022 00:44:09 +0200 Subject: [PATCH] feat: active navigation and back button --- packages/website/src/components/Section.tsx | 22 ++++++++++-- .../website/src/components/SidebarItems.tsx | 34 ++++++++++++------- .../website/src/components/SidebarLayout.tsx | 8 +++-- .../src/components/TableOfContentItems.tsx | 10 +++--- .../pages/docs/packages/[package]/index.tsx | 27 +++++++++++++-- .../website/src/pages/docs/packages/index.tsx | 17 ++++++++-- 6 files changed, 91 insertions(+), 27 deletions(-) diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx index b407fa20c..3864807b9 100644 --- a/packages/website/src/components/Section.tsx +++ b/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({ setOpened((o) => !o)}> - {icon ? {icon} : null} + {icon ? ( + + {icon} + + ) : null} {title} diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx index b1e9913de..379c2f5c4 100644 --- a/packages/website/src/components/SidebarItems.tsx +++ b/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>; }) { + const router = useRouter(); const { classes } = useStyles(); const groupItems = groupMembers(members); @@ -101,18 +104,25 @@ export function SidebarItems({
{groupItems[group].map((member, i) => ( - setOpened((o) => !o)}> - - - {member.name} - - {member.overloadIndex && member.overloadIndex > 1 ? ( - - {member.overloadIndex} + setOpened((o) => !o)} + label={ + + + {member.name} - ) : null} - - + {member.overloadIndex && member.overloadIndex > 1 ? ( + + {member.overloadIndex} + + ) : null} + + } + active={router.asPath === member.path} + variant="filled" + > ))}
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index 14e566288..e9e4d0ab1 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/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({ - + @@ -187,7 +189,7 @@ export function SidebarLayout({ - + diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx index 4b9653b90..8fbec025f 100644 --- a/packages/website/src/components/TableOfContentItems.tsx +++ b/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 ? ( - + @@ -88,7 +90,7 @@ export function TableOfContentItems({ {methodItems.length ? ( - + diff --git a/packages/website/src/pages/docs/packages/[package]/index.tsx b/packages/website/src/pages/docs/packages/[package]/index.tsx index 4018d8bb9..285ebdd9b 100644 --- a/packages/website/src/pages/docs/packages/[package]/index.tsx +++ b/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 & { error?: string }) { + const router = useRouter(); const { classes } = useStyles(); + const { colorScheme } = useMantineColorScheme(); return props.error ? ( {props.error} @@ -81,7 +97,7 @@ export default function VersionsRoute(props: Partial & { error?: s - + @@ -94,6 +110,11 @@ export default function VersionsRoute(props: Partial & { error?: s )) ?? null} + + void router.push('/docs/packages')}> + + + ); } diff --git a/packages/website/src/pages/docs/packages/index.tsx b/packages/website/src/pages/docs/packages/index.tsx index 3eb5f886d..5631ecaab 100644 --- a/packages/website/src/pages/docs/packages/index.tsx +++ b/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() { - +