new layout and add link to changelog

site/app/(root)/layout.tsx

@@ -1,11 +1,6 @@
 import { Sidebar } from 'components/Sidebar'
-import styles from './layout.module.css'
+import { SiteLayout } from 'components/SiteLayout'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className={styles.container}>
-      <Sidebar />
-      <main>{children}</main>
-    </div>
-  )
+  return <SiteLayout sidebar={<Sidebar />}>{children}</SiteLayout>
 }

site/app/changelog/layout.tsx

@@ -0,0 +1,5 @@
+import { SiteLayout } from 'components/SiteLayout'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <SiteLayout>{children}</SiteLayout>
+}

site/app/layout.css

@@ -156,8 +156,8 @@ button {
   text-wrap: pretty;
 }
 
-.prose li :where(h1, h2, h3) {
-  margin: 1rem 0;
+.prose li :where(h1, h2, h3, pre) {
+  margin: 1.4rem 0;
 }
 
 main {
@@ -166,7 +166,7 @@ main {
 
 @media screen and (min-width: 60rem) {
   main {
-    padding: 6rem 2rem 2rem;
+    padding: 2rem;
   }
 }
 

site/components/Sidebar/NavigationBoundary.module.css

@@ -2,7 +2,6 @@
   grid-area: 1 / 1;
   display: flex;
   flex-direction: column;
-  margin-top: calc(var(--font-size-heading-1) + 1rem);
   gap: 4rem;
 }
 

site/components/Sidebar/Sidebar.module.css

@@ -10,6 +10,6 @@
     grid-template-rows: 1fr min-content;
     height: fit-content;
     min-height: 100dvh;
-    padding: 6rem 2rem 2rem;
+    padding: 2rem;
   }
 }

site/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { GitProviderLink, Navigation } from 'mdxts/components'
-import { MdxtsLogo } from 'mdxts/assets'
 
 import { allData } from 'data'
 import styles from './Sidebar.module.css'
@@ -19,29 +18,6 @@ export function Sidebar() {
           gap: '2rem',
         }}
       >
-        <div style={{ display: 'flex', gap: '1rem' }}>
-          <a href="/" style={{ display: 'flex' }}>
-            <MdxtsLogo
-              style={{ width: undefined, height: 'var(--font-size-body-1)' }}
-            />
-          </a>
-          <span
-            style={{
-              position: 'relative',
-              top: '-0.1rem',
-              display: 'flex',
-              alignItems: 'center',
-              fontSize: 'var(--font-size-body-3)',
-              height: 'calc(var(--font-size-body-1) + 0.2rem)',
-              padding: '0 0.5rem',
-              border: '1px solid #3F687E',
-              borderRadius: '1rem',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            Beta
-          </span>
-        </div>
         <NavigationToggle />
       </div>
 

site/components/Sidebar/SidebarLink.tsx

@@ -22,7 +22,9 @@ export function SidebarLink({
       style={{
         display: 'block',
         padding: '0.25rem 0',
-        color: isCurrent ? 'white' : 'var(--color-foreground-interactive)',
+        color: isCurrent
+          ? 'var(--color-foreground)'
+          : 'var(--color-foreground-interactive)',
         ...style,
       }}
     >

site/components/SiteLayout/NavigationLink.tsx

@@ -0,0 +1,30 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function NavigationLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const currentPathname = usePathname()
+  const isCurrent = currentPathname.startsWith(href)
+
+  return (
+    <Link
+      href={href}
+      style={{
+        fontSize: 'var(--font-size-body-2)',
+        fontWeight: isCurrent ? 600 : undefined,
+        padding: '0.25rem 0.5rem',
+        color: isCurrent
+          ? 'var(--color-foreground)'
+          : 'var(--color-foreground-interactive)',
+      }}
+    >
+      {children}
+    </Link>
+  )
+}

site/components/SiteLayout/SiteLayout.module.css

@@ -0,0 +1,29 @@
+.container {
+  display: grid;
+  width: 100%;
+  margin: 0 auto;
+  flex: 1;
+}
+
+@media screen and (min-width: 60rem) {
+  .container {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: min-content 1fr;
+    max-width: 72rem;
+  }
+
+  .container header {
+    grid-column: 1 / -1;
+    grid-row: 1 / 2;
+  }
+
+  .container aside {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+  }
+
+  .container main {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+}

site/components/SiteLayout/SiteLayout.tsx

@@ -0,0 +1,42 @@
+import { MdxtsLogo } from 'mdxts/assets'
+
+import { NavigationLink } from './NavigationLink'
+import styles from './SiteLayout.module.css'
+
+export function SiteLayout({
+  sidebar,
+  children,
+}: {
+  sidebar?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className={styles.container}>
+      <header
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'end',
+          padding: '4rem 2rem 2rem',
+          gap: '0.25rem',
+        }}
+      >
+        <a
+          href="/"
+          style={{
+            display: 'flex',
+            marginRight: 'auto',
+          }}
+        >
+          <MdxtsLogo
+            style={{ width: undefined, height: 'var(--font-size-body-1)' }}
+          />
+        </a>
+        <NavigationLink href="/docs/getting-started">Docs</NavigationLink>
+        <NavigationLink href="/changelog">Changelog</NavigationLink>
+      </header>
+      {sidebar}
+      <main>{children}</main>
+    </div>
+  )
+}

site/components/SiteLayout/index.ts

@@ -0,0 +1 @@
+export * from './SiteLayout'