feat: update documentation sidebar

tuono-labs · Aug 15, 2024 · a7b7f0e · a7b7f0e
1 parent 4859916
commit a7b7f0e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 43 deletions.
diff --git a/apps/documentation/src/components/sidebar/SidebarLink.tsx b/apps/documentation/src/components/sidebar/SidebarLink.tsx
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.module.css b/apps/documentation/src/components/sidebar/sidebar-link.module.css
@@ -0,0 +1,6 @@
+.link {
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1.25rem;
+  font-weight: bold;
+}
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx
@@ -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}
+    />
+  )
+}
diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
@@ -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>
   )

diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx
@@ -0,0 +1,7 @@
+import { Head } from 'tuono'
+
+<Head>
+  <title>Tuono - Routing</title>
+</Head>
+
+# Routing index
diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx
@@ -4,6 +4,6 @@ import { Head } from 'tuono'
   <title>Tuono - Routing</title>
 </Head>
 
-# Routing
+# Project structure
 
 Todo