docs: rework docs site to have different sections (#2686)

This PR starts putting in place the high-level changes we want to make
to the docs site.
- It makes separate sections for Reference and Examples and Community.
- Gets rid of the secondary sidebar and integrates it into the main
sidebar.
- Groups the reference articles by type.
- Pulls in the examples alongside code and a live playground so people
don't have to visit examples.tldraw.com separately.

<img width="1458" alt="Screenshot 2024-01-30 at 09 43 46"
src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8">

Again, this is the top-level changes and there's more to be done for the
next PR(s):
  - create quick start page
  - clean up installation page
  - add accordion to Examples page prbly
  - put fun stuff in header (from footer)
  - landing page
  - something for landing page of API
  - search cmd-k and border
  - cleanup _sidebarReferenceContentLinks
  - external links _blank
  - address potential skew issue with code examples
  - have a link to other examples (next.js, etc.)

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Test Plan

1. Make sure examples work!

### Release Notes

- Rework our docs site to pull together the examples app and reference
section more cohesively.

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
Co-authored-by: Lu Wilson <l2wilson94@gmail.com>
Co-authored-by: Dan Groshev <git@dgroshev.com>

apps/docs/components/Header.tsx

@@ -1,20 +1,24 @@
+'use client'
+
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import Link from 'next/link'
 import { Icon } from './Icon'
+import { Chevron } from './Icons'
 import { Search } from './Search'
 import { ThemeSwitcher } from './ThemeSwitcher'
 
 export function Header({
-	activeId,
 	searchQuery,
 	searchType,
+	sectionId,
 }: {
-	activeId: string | null
 	searchQuery?: string
 	searchType?: string
+	sectionId?: string
 }) {
 	return (
 		<div className="layout__header">
-			<Link href="/">
+			<Link href="/quick-start">
 				<div
 					className="lockup"
 					style={{
@@ -23,14 +27,16 @@ export function Header({
 					}}
 				/>
 			</Link>
-			<Search activeId={activeId} prevQuery={searchQuery} prevType={searchType} />
-			<div className="layout__header__socials">
+			<Search prevQuery={searchQuery} prevType={searchType} />
+			<div className="layout__header__sections_and_socials">
+				<SectionLinks sectionId={sectionId} />
+				<ThemeSwitcher />
 				<a
-					href="https://twitter.com/tldraw"
+					href="https://discord.com/invite/SBBEVCA4PG"
 					className="sidebar__button icon-button"
-					title="twitter"
+					title="discord"
 				>
-					<Icon icon="twitter" />
+					<Icon icon="discord" />
 				</a>
 				<a
 					href="https://github.com/tldraw/tldraw"
@@ -39,15 +45,84 @@ export function Header({
 				>
 					<Icon icon="github" />
 				</a>
-				<a
-					href="https://discord.com/invite/SBBEVCA4PG"
-					className="sidebar__button icon-button"
-					title="discord"
-				>
-					<Icon icon="discord" />
-				</a>
-				<ThemeSwitcher />
 			</div>
 		</div>
 	)
 }
+
+export function SectionLinks({ sectionId }: { sectionId?: string | null }) {
+	return (
+		<>
+			<a
+				href="/quick-start"
+				title="Learn"
+				data-active={!['reference', 'examples'].includes(sectionId || '')}
+				className="layout_header__section"
+			>
+				Learn
+			</a>
+			<a
+				href="/reference/editor/Editor"
+				title="Reference"
+				data-active={sectionId === 'reference'}
+				className="layout_header__section"
+			>
+				Reference
+			</a>
+			<a
+				href="/examples/basic/develop"
+				title="Examples"
+				data-active={sectionId === 'examples'}
+				className="layout_header__section"
+			>
+				Examples
+			</a>
+
+			<NavigationMenu.Root className="NavigationMenuRoot">
+				<NavigationMenu.List className="NavigationMenuList">
+					<NavigationMenu.Item>
+						<NavigationMenu.Trigger
+							className="NavigationMenuTrigger"
+							onPointerMove={(event) => event.preventDefault()}
+							onPointerLeave={(event) => event.preventDefault()}
+						>
+							<span>
+								Community <Chevron className="CaretDown" aria-hidden />
+							</span>
+						</NavigationMenu.Trigger>
+						<NavigationMenu.Content
+							className="NavigationMenuContent"
+							onPointerMove={(event) => event.preventDefault()}
+							onPointerLeave={(event) => event.preventDefault()}
+						>
+							<ul>
+								<li>
+									<NavigationMenu.Link asChild>
+										<a href="/community/contributing">Contributing</a>
+									</NavigationMenu.Link>
+								</li>
+								<li>
+									<NavigationMenu.Link asChild>
+										<a href="/community/translations">Translations</a>
+									</NavigationMenu.Link>
+								</li>
+								<li>
+									<NavigationMenu.Link asChild>
+										<a href="/community/license">License</a>
+									</NavigationMenu.Link>
+								</li>
+								<li>
+									<NavigationMenu.Link asChild>
+										<a href="https://discord.com/invite/SBBEVCA4PG" target="_blank">
+											Discord
+										</a>
+									</NavigationMenu.Link>
+								</li>
+							</ul>
+						</NavigationMenu.Content>
+					</NavigationMenu.Item>
+				</NavigationMenu.List>
+			</NavigationMenu.Root>
+		</>
+	)
+}