[docs] Small style changes (#2805)

This PR has some superficial style changes for the docs.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

apps/docs/components/Autocomplete.css

@@ -5,6 +5,10 @@
 	flex-direction: row;
 	border-radius: 24px;
 	padding: 0 16px;
+	border: 1px solid var(--color-tint-2);
+}
+
+.autocomplete__wrapper:focus-within {
 	background-color: var(--color-tint-1);
 }
 

apps/docs/components/Header.tsx

@@ -1,24 +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({ sectionId }: { sectionId?: string }) {
 	return (
 		<div className="layout__header">
-			<Link href="/quick-start">
+			<div className="layout__header__left">
-				<div
+				<Link href="/quick-start">
-					className="lockup"
+					<div
-					style={{
+						className="lockup"
-						mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
+						style={{
-						WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
+							mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
-					}}
+							WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
-				/>
+						}}
-			</Link>
+					/>
+				</Link>
+			</div>
 			<Search />
 			<div className="layout__header__sections_and_socials">
 				<SectionLinks sectionId={sectionId} />
@@ -79,52 +79,6 @@ export function SectionLinks({ sectionId }: { sectionId?: string | null }) {
 			>
 				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>
 		</>
 	)
 }

apps/docs/components/Search.tsx

@@ -111,9 +111,10 @@ export function Search() {
 			/>
 			{platform && (
 				<span className="search__keyboard">
-					{platform === 'mac' && <kbd data-platform="mac">⌘</kbd>}
+					<kbd data-platform={platform === 'mac' ? 'mac' : 'win'}>
-					{platform === 'nonMac' && <kbd data-platform="win">Ctrl</kbd>}
+						<span>{platform === 'mac' ? '⌘' : 'Ctrl'}</span>
-					<kbd>K</kbd>
+						<span>K</span>
+					</kbd>
 				</span>
 			)}
 		</div>

apps/docs/content/sections.json

@@ -18,7 +18,7 @@
 		"title": "Community",
 		"description": "Guides for contributing to tldraw's open source project.",
 		"categories": [],
-		"sidebar_behavior": "hidden"
+		"sidebar_behavior": "show-links"
 	},
 	{
 		"id": "reference",

apps/docs/styles/globals.css

@@ -134,7 +134,7 @@ body {
 	top: 0px;
 	display: grid;
 	padding: 16px;
-	grid-template-columns: auto 1fr auto;
+	grid-template-columns: 250px 1fr auto;
 	gap: 16px;
 	justify-content: center;
 	align-items: center;
@@ -158,23 +158,28 @@ body {
 
 .layout_header__section {
 	text-decoration: none;
-	margin: 0 4px;
 	padding: 8px 12px;
 	font-size: 14px;
 	color: var(--color-text);
-	background-color: transparent;
+	position: relative;
-	transition: background-color 0.12s ease-in-out;
+}
-	transition-delay: 0.1s;
+
+.layout_header__section::after {
+	position: absolute;
+	display: block;
+	content: '';
+	inset: 7px 1px;
+	background-color: var(--bg);
 	border-radius: var(--border-radius-menu);
 }
 
 .layout_header__section[data-active='true'] {
-	background-color: var(--color-tint-1);
+	--bg: var(--color-tint-1);
 }
 
 @media (hover: hover) {
-	.layout_header__section:not([data-active='true']):hover {
+	.layout_header__section:hover {
-		background-color: var(--color-tint-1);
+		--bg: var(--color-tint-1);
 	}
 }
 
@@ -599,8 +604,6 @@ body {
 	gap: 12px;
 }
 
-
-
 .article__embed > iframe {
 	width: 100%;
 	height: 100%;
@@ -1018,29 +1021,30 @@ body {
 }
 
 .search__keyboard {
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	position: absolute;
-	top: 50%;
+	height: 100%;
-	right: 12px;
+	padding: 0px;
+	top: 0px;
+	right: 0px;
 	z-index: 2;
-	transform: translateY(-50%);
 	color: var(--color-tint-5);
 	pointer-events: none;
 	transition: color 0.12s;
 }
 
 .search__keyboard kbd {
-	display: inline-block;
+	display: inline-flex;
-	height: 24px;
+	gap: 4px;
-	min-width: 24px;
+	height: 100%;
-	line-height: 26px;
+	align-items: center;
-	padding: 0 4px;
+	padding: 4px 12px;
+	margin-right: 0px;
 	text-align: center;
-	margin-right: 4px;
+	font-size: 13px;
-	font-size: 12px;
+	color: var(--color-text);
-	color: var(--color-tint-6);
-	background-color: var(--color-tint-2);
-	border-radius: 2px;
 }
 
 .search__ai-toggle {