feat: update documentation sidebar

2026-07-25 21:02:45 -07:00 · 2024-08-15 18:19:40 +02:00
parent 4859916edd
commit a7b7f0eac2
6 changed files with 64 additions and 43 deletions
@@ -1,38 +0,0 @@
-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}
-    />
-  )
-}
@@ -0,0 +1,6 @@
+.link {
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1.25rem;
+  font-weight: bold;
+}
@@ -0,0 +1,45 @@
+import { NavLink, type NavLinkProps } from '@mantine/core'
+import { useState, type ReactNode } from 'react'
+import { Link, useRouter } from 'tuono'
+import { IconChevronRight } from '@tabler/icons-react'
+
+import styles from './sidebar-link.module.css'
+
+interface SidebarLinkProps {
+  label: string
+  href: string
+  onClick?: () => void
+  children?: ReactNode
+}
+
+export default function SidebarLink(
+  props: SidebarLinkProps & NavLinkProps,
+): JSX.Element {
+  const { pathname } = useRouter()
+  const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
+
+  return (
+    <NavLink
+      component={props.href.startsWith('#') ? 'button' : Link}
+      active={pathname === props.href}
+      className={styles.link}
+      rightSection={
+        props.children && (
+          <IconChevronRight
+            size="1.2rem"
+            stroke={1.5}
+            className="mantine-rotate-rtl"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsOpen((state) => !state)
+            }}
+          />
+        )
+      }
+      opened={isOpen}
+      autoContrast
+      {...props}
+    />
+  )
+}
@@ -1,5 +1,5 @@
 import { AppShell } from '@mantine/core'
-import SidebarLink from './SidebarLink'
+import SidebarLink from './sidebar-link'

 export default function Sidebar({ close }: { close: () => void }): JSX.Element {
  return (
@@ -16,17 +16,18 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
        label="Installation"
        onClick={close}
      />
-      <SidebarLink label="Routing" href="#required-for-focus" defaultOpened>
+      <SidebarLink label="Routing" href="/documentation/routing" defaultOpened>
        <SidebarLink
          href="/documentation/routing/intro"
-          label="FS routing"
+          label="Project structure"
          onClick={close}
        />
      </SidebarLink>
      <SidebarLink
-        label="✨ Contributing"
+        label="Contributing"
        href="/documentation/contributing"
        onClick={close}
+        leftSection="✨"
      />
    </AppShell.Navbar>
  )
@@ -0,0 +1,7 @@
+import { Head } from 'tuono'
+
+<Head>
+  <title>Tuono - Routing</title>
+</Head>
+
+# Routing index
@@ -4,6 +4,6 @@ import { Head } from 'tuono'
  <title>Tuono - Routing</title>
 </Head>

-# Routing
+# Project structure

 Todo