[docs] Separate some pages out of the Docs section (#1626)

This PR changes the structure of the docs site's sidebar.


![image](https://github.com/tldraw/tldraw/assets/15892272/ffe1e152-c921-43f0-9ba2-d084bda5e1e3)

I think this signposts more clearly what the different pages are for.
And it also paves the way for some work I want to do on
expanding+refining the Editor docs.

This PR also simplifies URL for all sidebar links.
It's a bit scrappy, but I think it feels simple enough to work with, and
easy-enough to change in the future.
> But hey! I've been doing this a couple times recently. Maybe we should
refactor? Or maybe we should keep going with what we've got and focus on
getting these docs *done*.

### Change Type

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

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Check that all the sidebar links go to where you expect.
2. Check that old URLs redirect to the right pages, eg: `/docs/usage`
should go to the usage page.


### Release Notes

- Documentation: Restructured the sidebar for clarity.

apps/docs/components/Breadcrumb.tsx

@@ -15,8 +15,12 @@ export function Breadcrumb({
 			<Link href={`/`}>tldraw</Link>
 			{section && (
 				<>
-					{` / `}
-					<Link href={`/${section.id}`}>{section.title}</Link>
+					{section.title && (
+						<>
+							{` / `}
+							<Link href={`/${section.id}`}>{section.title}</Link>
+						</>
+					)}
 					{category && (
 						<>
 							{category.id === 'ucg' ? null : (

apps/docs/components/Sidebar.tsx

@@ -106,11 +106,13 @@ function SidebarLink(props: SidebarContentLink) {
 function SidebarSection({ title, url, children }: SidebarContentSectionLink) {
 	return (
 		<li className="sidebar__section">
-			<Link href={url}>
-				<div className="sidebar__link sidebar__section__title" data-active={false}>
-					{title}
-				</div>
-			</Link>
+			{title && (
+				<Link href={url}>
+					<div className="sidebar__link sidebar__section__title" data-active={false}>
+						{title}
+					</div>
+				</Link>
+			)}
 			<ul className="sidebar__list sidebar__section__list">
 				{children.map((link) => (
 					<SidebarLink key={link.url} {...link} />