feat: update sidebar titles and colors

tuono-labs · Dec 4, 2024 · ff61b52 · ff61b52
1 parent 4a65377
commit ff61b52
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 27 deletions.
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.module.css b/apps/documentation/src/components/sidebar/sidebar-link.module.css
@@ -1,14 +1,12 @@
 .link {
-	border-radius: 8px;
-	margin-top: 0.25rem;
-	line-height: 1rem;
-	font-weight: 500;
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1rem;
+  font-weight: 500;
+  transition: 0.3s;
 }
 
 .link span {
-	font-size: 14px;
-}
-
-.sublink span {
-	color: gray;
+  font-size: 14px !important;
+  color: var(--mantine-color-sidebar-gray);
 }
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx
@@ -1,5 +1,6 @@
 import type { JSX, ReactNode } from 'react'
 import { NavLink, type NavLinkProps } from '@mantine/core'
+import clsx from 'clsx'
 import { Link, useRouter } from 'tuono'
 import { IconChevronRight } from '@tabler/icons-react'
 
@@ -17,9 +18,11 @@ export default function SidebarLink(
 ): JSX.Element {
   const { pathname } = useRouter()
 
+  const isActive = pathname === props.href
+
   const internalProps = {
-    active: pathname === props.href,
-    className: styles.link,
+    active: isActive,
+    className: clsx(styles.link),
     rightSection: props.children && (
       <IconChevronRight
         size="1.2rem"

diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
@@ -7,6 +7,7 @@ import {
   Title,
   Button,
   ScrollArea,
+  Text,
 } from '@mantine/core'
 
 import SidebarLink from './sidebar-link'
@@ -107,6 +108,9 @@ export default function Sidebar({ close }: SidebarProps): JSX.Element {
           />
         </SidebarLink>
         <Divider my="md" />
+        <Text size="xs" fw={700} fz={12} pl={12} py={5}>
+          Overview
+        </Text>
         <SidebarLink label="Routing" href="#required-for-focus">
           <SidebarLink
             href="/documentation/routing/intro"
@@ -152,6 +156,30 @@ export default function Sidebar({ close }: SidebarProps): JSX.Element {
             onClick={close}
           />
         </SidebarLink>
+        <Divider my="md" />
+        <Text size="xs" fw={700} fz={12} pl={12} py={5}>
+          API reference
+        </Text>
+        <SidebarLink label="Components" href="#required-for-focus">
+          <SidebarLink
+            href="/documentation/routing/intro"
+            label="Head"
+            onClick={close}
+          />
+        </SidebarLink>
+        <SidebarLink label="Hooks" href="#required-for-focus">
+          <SidebarLink
+            href="/documentation/routing/intro"
+            label="Head"
+            onClick={close}
+          />
+        </SidebarLink>
+        <SidebarLink
+          href="/documentation/routing/intro"
+          label="tuono.config.ts"
+          onClick={close}
+        />
+        <Divider my="md" />
         <SidebarLink
           label="Contributing"
           href="#required-for-focus"
@@ -168,21 +196,6 @@ export default function Sidebar({ close }: SidebarProps): JSX.Element {
             onClick={close}
           />
         </SidebarLink>
-        <Divider my="md" />
-        <SidebarLink label="Components" href="#required-for-focus">
-          <SidebarLink
-            href="/documentation/routing/intro"
-            label="Head"
-            onClick={close}
-          />
-        </SidebarLink>
-        <SidebarLink label="Hooks" href="#required-for-focus">
-          <SidebarLink
-            href="/documentation/routing/intro"
-            label="Head"
-            onClick={close}
-          />
-        </SidebarLink>
       </AppShell.Section>
     </AppShell.Navbar>
   )

diff --git a/apps/documentation/src/routes/__root.tsx b/apps/documentation/src/routes/__root.tsx
@@ -3,6 +3,7 @@ import type { ReactNode, JSX } from 'react'
 import {
   ColorSchemeScript,
   createTheme,
+  CSSVariablesResolver,
   MantineProvider,
   AppShell,
   Container,
@@ -60,6 +61,20 @@ const theme = createTheme({
       },
     },
   },
+  other: {
+    sidebarGrayLight: '#343a40',
+    sidebarGrayDark: '#adb5bd',
+  },
+})
+
+const resolver: CSSVariablesResolver = (theme) => ({
+  variables: {},
+  light: {
+    '--mantine-color-sidebar-gray': theme.other.sidebarGrayLight,
+  },
+  dark: {
+    '--mantine-color-sidebar-gray': theme.other.sidebarGrayDark,
+  },
 })
 
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
@@ -77,7 +92,7 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
       <ColorSchemeScript />
-      <MantineProvider theme={theme}>
+      <MantineProvider theme={theme} cssVariablesResolver={resolver}>
         <AppShell
           layout="alt"
           header={{ height: 60 }}