From 53698bed70961a8802e6c4f6f5e142dce21570c8 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 1 Feb 2024 18:16:30 +0000
Subject: [PATCH] [Docs] Tweak sidebar titles (#2706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adjusts the way that sidebar titles look.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
---
 .ignore                          |  1 +
 apps/docs/components/Sidebar.tsx |  4 ++--
 apps/docs/styles/globals.css     | 37 ++++++++++++++++----------------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/.ignore b/.ignore
index 5a6f04ad1..7f42387d4 100644
--- a/.ignore
+++ b/.ignore
@@ -16,5 +16,6 @@ yarn.lock
 apps/example/www/index.css
 **/dist/*
 *.cjs
+apps/docs/.next
 
 packages/tldraw/tldraw.css
\ No newline at end of file
diff --git a/apps/docs/components/Sidebar.tsx b/apps/docs/components/Sidebar.tsx
index eaff4fe55..6895fcb2e 100644
--- a/apps/docs/components/Sidebar.tsx
+++ b/apps/docs/components/Sidebar.tsx
@@ -200,7 +200,7 @@ function SidebarArticle({
 
 	return (
 		<li className="sidebar__article">
-			<Link href={url} className="sidebar__link" data-active={isActive}>
+			<Link href={url} title={title} className="sidebar__link" data-active={isActive}>
 				{title}
 			</Link>
 
@@ -213,7 +213,7 @@ function SidebarArticle({
 								key={heading.slug}
 								data-heading-level={heading.title === 'Constructor' ? 2 : heading.level}
 							>
-								<Link href={`#${heading.slug}`} className="sidebar__link">
+								<Link href={`#${heading.slug}`} title={heading.title} className="sidebar__link">
 									{heading.isCode ? (
 										<code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code>
 									) : (
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 4058488a0..d022b57fc 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -21,7 +21,7 @@
 
 	/* Light theme */
 	--color-text: #1d1d1d;
-	--color-text-secondary: #999;
+	--color-text-secondary: #666;
 	--color-background: #ffffff;
 	--color-contrast: #ffffff;
 	--color-accent: #2f80ed;
@@ -820,19 +820,19 @@ body {
 	font-size: 13px;
 }
 
-.sidebar__list li .sidebar__category li[data-heading-level="3"] a,
-.sidebar__list li .sidebar__article li[data-heading-level="3"] a {
+.sidebar__list li .sidebar__category li[data-heading-level='3'] a,
+.sidebar__list li .sidebar__article li[data-heading-level='3'] a {
 	padding-left: 16px;
 }
 
-.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="2"] a,
-.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="2"] a {
+.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='2'] a,
+.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='2'] a {
 	padding-left: 16px;
 	color: var(--color-text-secondary);
 }
 
-.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="3"] a,
-.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="3"] a {
+.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='3'] a,
+.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='3'] a {
 	padding-left: 24px;
 }
 
@@ -880,10 +880,11 @@ body {
 }
 
 .sidebar__section__title {
-	font-size: 14px;
-	font-weight: normal;
+	font-size: 12px;
+	font-weight: 500;
 	margin-bottom: 4px;
 	position: relative;
+	letter-spacing: 0.5px;
 	height: 40px;
 	display: flex;
 	align-items: center;
@@ -1401,9 +1402,9 @@ html[data-theme='light'] .hero__dark {
 
 .NavigationMenuContent {
 	position: absolute;
-  width: 100%;
-  top: calc(100% + 4px);
-  left: 4px;
+	width: 100%;
+	top: calc(100% + 4px);
+	left: 4px;
 	overflow: hidden;
 	border-radius: var(--border-radius-menu);
 	background-color: var(--color-background);
@@ -1430,14 +1431,14 @@ html[data-theme='light'] .hero__dark {
 }
 
 .NavigationMenuViewport {
-  position: relative;
-  width: 100%;
-  height: var(--radix-navigation-menu-viewport-height);
+	position: relative;
+	width: 100%;
+	height: var(--radix-navigation-menu-viewport-height);
 }
 @media only screen and (min-width: 600px) {
-  .NavigationMenuViewport {
-    width: var(--radix-navigation-menu-viewport-width);
-  }
+	.NavigationMenuViewport {
+		width: var(--radix-navigation-menu-viewport-width);
+	}
 }
 
 .CaretDown {