From 4859916edd896ecead1e3c517b315f6d07310ae0 Mon Sep 17 00:00:00 2001
From: Valerio Ageno <valerioageno@yahoo.it>
Date: Thu, 15 Aug 2024 11:31:33 +0200
Subject: [PATCH] feat: update documentation sidebar

---
 .../src/components/sidebar/SidebarLink.tsx    | 38 +++++++++++++++++++
 .../src/components/sidebar/sidebar.tsx        | 22 +++++------
 2 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 apps/documentation/src/components/sidebar/SidebarLink.tsx

diff --git a/apps/documentation/src/components/sidebar/SidebarLink.tsx b/apps/documentation/src/components/sidebar/SidebarLink.tsx
new file mode 100644
index 00000000..5271e0b0
--- /dev/null
+++ b/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}
+    />
+  )
+}
diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
index 883699bf..3ddb4c25 100644
--- a/apps/documentation/src/components/sidebar/sidebar.tsx
+++ b/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}
       />