feat: update documentation sidebar

apps/documentation/src/components/sidebar/SidebarLink.tsx

@@ -0,0 +1,38 @@
+import { NavLink, type NavLinkProps } from '@mantine/core'
+import type { CSSProperties, ReactNode } from 'react'
+import { Link, useRouter } from 'tuono'
+
+interface SidebarLinkProps {
+  label: string
+  href: string
+  onClick?: () => void
+  children?: ReactNode
+}
+
+const styles: CSSProperties = {
+  borderRadius: 8,
+  marginTop: '0.25rem',
+  lineHeight: '1.25rem',
+  fontWeight: 'bold',
+}
+
+export default function SidebarLink(
+  props: SidebarLinkProps & NavLinkProps,
+): JSX.Element {
+  const { pathname } = useRouter()
+
+  return (
+    <NavLink
+      component={props.href.startsWith('#') ? 'button' : Link}
+      style={
+        pathname === props.href
+          ? {
+              color: 'var(--mantine-color-violet-4)',
+              ...styles,
+            }
+          : styles
+      }
+      {...props}
+    />
+  )
+}

apps/documentation/src/components/sidebar/sidebar.tsx

@@ -1,34 +1,30 @@
-import { AppShell, NavLink } from '@mantine/core'
-import { Link } from 'tuono'
+import { AppShell } from '@mantine/core'
+import SidebarLink from './SidebarLink'
 
 export default function Sidebar({ close }: { close: () => void }): JSX.Element {
   return (
     <AppShell.Navbar p="md">
       <h3>Tutorial</h3>
-      <NavLink
+      <SidebarLink
         href="/documentation/tutorial/intro"
-        component={Link}
         label="Intro"
         onClick={close}
       />
       <h3>Documentation</h3>
-      <NavLink
+      <SidebarLink
         href="/documentation/installation"
-        component={Link}
         label="Installation"
         onClick={close}
       />
-      <NavLink label="Routing" href="#required-for-focus" defaultOpened>
-        <NavLink
+      <SidebarLink label="Routing" href="#required-for-focus" defaultOpened>
+        <SidebarLink
           href="/documentation/routing/intro"
-          component={Link}
           label="FS routing"
           onClick={close}
         />
-      </NavLink>
-      <NavLink
-        label="Contributing"
-        component={Link}
+      </SidebarLink>
+      <SidebarLink
+        label="✨ Contributing"
         href="/documentation/contributing"
         onClick={close}
       />