[docs] Add side nav, dabble in mobile responsiveness

docs/package.json

@@ -48,6 +48,7 @@
     "lz-string": "^1.5.0",
     "next": "15.0.2",
     "postcss": "^8.4.47",
+    "postcss-custom-media": "^11.0.5",
     "postcss-import": "^16.1.0",
     "prop-types": "^15.8.1",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
@@ -64,6 +65,7 @@
     "remark-mdx-frontmatter": "^5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
+    "scroll-into-view-if-needed": "3.1.0",
     "shiki": "^1.22.2",
     "to-vfile": "^8.0.0",
     "unist-util-visit": "^5.0.0",

docs/postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     'postcss-import': {},
     '@tailwindcss/postcss': {},
+    'postcss-custom-media': {},
   },
 };

docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css

@@ -51,9 +51,9 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 100%;
   transform: translate(-50%, -50%);
-  max-width: min(100vw - 48px, 320px);
+  width: 320px;
+  max-width: calc(100vw - 48px);
   margin-top: -2rem;
   padding: 1.5rem;
   border-radius: 0.5rem;

docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx

@@ -4,18 +4,18 @@ import { Dialog } from '@base-ui-components/react/Dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-950 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
+      <Dialog.Trigger className="flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
         View notifications
       </Dialog.Trigger>
       <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 ease-out dark:opacity-70 [[data-entering],[data-exiting]]:opacity-0" />
-      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-full max-w-[min(100vw-48px,320px)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-950 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
+      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-80 max-w-[min(100vw-3rem,320px)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
         <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
           Your notifications
         </Dialog.Title>
         <Dialog.Description className="mb-4 text-gray-600">
           You are all caught up. Good job!
         </Dialog.Description>
-        <Dialog.Close className="ml-auto flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-950 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
+        <Dialog.Close className="ml-auto flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
           Close
         </Dialog.Close>
       </Dialog.Popup>

docs/src/app/new/(content)/layout.css

@@ -0,0 +1,37 @@
+@import 'docs/src/breakpoints.css';
+
+@layer components {
+  .SidebarLayoutRoot {
+    --sidebar-width: 17.5rem;
+
+    display: grid;
+    align-items: start;
+    padding: 0 3rem;
+    grid-template-columns: 1fr;
+
+    @media (--show-side-nav) {
+      padding: 0;
+      grid-template-columns: var(--sidebar-width) 1fr;
+    }
+
+    @media (--show-quick-nav) {
+      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
+    }
+  }
+
+  .SidebarLayoutMain {
+    padding-top: 3rem;
+    padding-bottom: 5rem;
+    min-width: 0;
+    margin: 0 auto;
+
+    @media (--show-side-nav) {
+      margin-left: 0;
+      margin-right: 3rem;
+    }
+
+    @media (--show-quick-nav) {
+      margin: 0;
+    }
+  }
+}

docs/src/app/new/(content)/layout.tsx

@@ -1,9 +1,163 @@
 import * as React from 'react';
+import * as SideNav from 'docs/src/components/SideNav';
+import * as QuickNav from 'docs/src/components/quick-nav/QuickNav';
+import './layout.css';
 
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
-    <div className="px-8 pt-12 pb-20">
-      <div className="relative mx-auto max-w-[768px]">{children}</div>
+    <div className="SidebarLayoutRoot">
+      <SideNav.Root>
+        {nav.map((section) => (
+          <SideNav.Section key={section.label}>
+            <SideNav.Heading>{section.label}</SideNav.Heading>
+            <SideNav.List>
+              {section.links.map((link) => (
+                <SideNav.Item key={link.href} href={link.href}>
+                  {link.label}
+                </SideNav.Item>
+              ))}
+            </SideNav.List>
+          </SideNav.Section>
+        ))}
+      </SideNav.Root>
+
+      <main className="SidebarLayoutMain">
+        <QuickNav.Container>{children}</QuickNav.Container>
+      </main>
     </div>
   );
 }
+
+const nav = [
+  {
+    label: 'Overview',
+    links: [
+      {
+        label: 'Quick start',
+        href: '/new/overview/quick-start',
+      },
+      {
+        label: 'Accessibility',
+        href: '/new/overview/accessibility',
+      },
+      {
+        label: 'Releases',
+        href: '/new/overview/releases',
+      },
+      {
+        label: 'About',
+        href: '/new/overview/about',
+      },
+    ],
+  },
+  {
+    label: 'Handbook',
+    links: [
+      {
+        label: 'Styling',
+        href: '/new/handbook/styling',
+      },
+      {
+        label: 'Animation',
+        href: '/new/handbook/animation',
+      },
+      {
+        label: 'Composition',
+        href: '/new/handbook/composition',
+      },
+      {
+        label: 'Migrating from Radix',
+        href: '/new/handbook/migrating-from-radix',
+      },
+    ],
+  },
+  {
+    label: 'Components',
+    links: [
+      {
+        label: 'Alert Dialog',
+        href: '/new/components/alert-dialog',
+      },
+      {
+        label: 'Checkbox',
+        href: '/new/components/checkbox',
+      },
+      {
+        label: 'Checkbox Group',
+        href: '/new/components/checkbox group',
+      },
+      {
+        label: 'Collapsible',
+        href: '/new/components/collapsible',
+      },
+      {
+        label: 'Combobox',
+        href: '/new/components/combobox',
+      },
+      {
+        label: 'Datepicker',
+        href: '/new/components/datepicker',
+      },
+      {
+        label: 'Dialog',
+        href: '/new/components/dialog',
+      },
+      {
+        label: 'Field',
+        href: '/new/components/field',
+      },
+      {
+        label: 'Fieldset',
+        href: '/new/components/fieldset',
+      },
+      {
+        label: 'Form',
+        href: '/new/components/form',
+      },
+      {
+        label: 'Menu',
+        href: '/new/components/menu',
+      },
+      {
+        label: 'Number Field',
+        href: '/new/components/number-field',
+      },
+      {
+        label: 'Popover',
+        href: '/new/components/popover',
+      },
+      {
+        label: 'Preview Card',
+        href: '/new/components/preview-card',
+      },
+      {
+        label: 'Progress',
+        href: '/new/components/progress',
+      },
+      {
+        label: 'Radio Group',
+        href: '/new/components/radio-group',
+      },
+      {
+        label: 'Separator',
+        href: '/new/components/separator',
+      },
+      {
+        label: 'Slider',
+        href: '/new/components/slider',
+      },
+      {
+        label: 'Switch',
+        href: '/new/components/switch',
+      },
+      {
+        label: 'Tabs',
+        href: '/new/components/tabs',
+      },
+      {
+        label: 'Tooltip',
+        href: '/new/components/tooltip',
+      },
+    ],
+  },
+];

docs/src/app/new/layout.css

@@ -1,17 +1,90 @@
-html {
-  color-scheme: light dark;
+@import 'docs/src/breakpoints.css';
 
-  /* macOS overscroll background */
-  background-color: #000;
-}
+@layer base {
+  html {
+    color-scheme: light dark;
+
+    /* macOS overscroll background */
+    background-color: var(--color-gray-50);
+  }
+
+  body {
+    min-width: 360px;
+    line-height: 1.5;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
 
-body {
-  min-width: 360px;
-  line-height: 1.5;
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+  ::selection {
+    background-color: var(--color-selection);
+  }
 }
 
-::selection {
-  background-color: var(--color-selection);
+@layer components {
+  .RootLayout {
+    /* Padding starts with 2rem, and climbs up to 3rem between 640px and 960px */
+    --root-layout-padding-x: round(clamp(2rem, 5vw, 3rem), 1px);
+
+    z-index: 0;
+    position: relative;
+    padding-inline: var(--root-layout-padding-x);
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      background-color: var(--color-gridline);
+      height: 1px;
+      right: 0;
+      left: 0;
+    }
+
+    &::before {
+      top: 3rem;
+      margin-top: -1px;
+    }
+
+    &::after {
+      bottom: 3rem;
+      margin-bottom: -1px;
+    }
+  }
+
+  .RootLayoutContainer {
+    position: relative;
+    display: flex;
+    margin-inline: auto;
+    min-height: 100dvh;
+    max-width: calc(var(--breakpoint-max-layout-width) - var(--root-layout-padding-x) * 2);
+    flex-direction: column;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: var(--color-gridline);
+    }
+
+    &::before {
+      left: 0;
+      margin-left: -1px;
+    }
+
+    &::after {
+      right: 0;
+      margin-right: -1px;
+    }
+  }
+
+  .RootLayoutContent {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    background-color: var(--color-content);
+  }
 }

docs/src/app/new/layout.tsx

@@ -4,13 +4,9 @@ import './layout.css';
 
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
-    <div className="relative z-0 px-[round(min(3rem,max(2rem,5vw)),1px)]">
-      <span className="absolute top-12 right-0 left-0 -mt-px h-px bg-gridline" />
-      <span className="absolute right-0 bottom-12 left-0 -mb-px h-px bg-gridline" />
-      <div className="relative mx-auto flex min-h-dvh max-w-[1330px] flex-col py-12">
-        <span className="absolute top-0 bottom-0 left-0 -ml-px w-px bg-gridline" />
-        <span className="absolute top-0 right-0 bottom-0 -mr-px w-px bg-gridline" />
-        <div className="flex grow flex-col bg-content">{children}</div>
+    <div className="RootLayout">
+      <div className="RootLayoutContainer">
+        <div className="RootLayoutContent">{children}</div>
       </div>
     </div>
   );