[docs] Mobile nav (#881)

mui · Nov 28, 2024 · 192a8a9 · 192a8a9
1 parent 0f24514
commit 192a8a9
Show file tree

Hide file tree

Showing 19 changed files with 739 additions and 205 deletions.
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function Layout({ children }: React.PropsWithChildren) {
         />
         <meta
           name="theme-color"
-          content="oklch(0% 0% 0)"
+          content="oklch(17% 1% 264)"
           media="(prefers-color-scheme: dark)"
         />
       </head>

diff --git a/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css
@@ -22,6 +22,10 @@
       background-color: var(--color-gray-100);
     }
   }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
 }
 
 .Close {
@@ -34,7 +38,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms ease-out;
+  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
   @media (prefers-color-scheme: dark) {
     opacity: 0.7;

diff --git a/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx b/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 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">
+      <Dialog.Trigger className="flex rounded-md 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 active:bg-gray-100">
         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.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[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 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">
+        <Dialog.Close className="ml-auto flex rounded-md 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 active:bg-gray-100">
           Close
         </Dialog.Close>
       </Dialog.Popup>

diff --git a/docs/src/app/new/(content)/layout.css b/docs/src/app/new/(content)/layout.css
@@ -10,7 +10,7 @@
     grid-template-columns: 1fr;
 
     @media (--sm) {
-      padding-inline: 3rem;
+      padding-inline: 2.5rem;
     }
 
     @media (--show-side-nav) {
@@ -24,11 +24,13 @@
   }
 
   .ContentLayoutMain {
+    min-width: 0;
+    max-width: 48rem;
+    width: 100%;
+
     padding-top: 1.5rem;
     padding-bottom: 5rem;
-    min-width: 0;
     margin: 0 auto;
-    width: 100%;
 
     @media (--sm) {
       padding-top: 2rem;

diff --git a/docs/src/app/new/(content)/layout.tsx b/docs/src/app/new/(content)/layout.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { Metadata } from 'next/types';
 import * as SideNav from 'docs/src/components/SideNav';
 import * as QuickNav from 'docs/src/components/quick-nav/QuickNav';
+import { nav } from 'docs/src/nav';
 import './layout.css';
 
 export default function Layout({ children }: React.PropsWithChildren) {
@@ -29,139 +30,6 @@ export default function Layout({ children }: React.PropsWithChildren) {
   );
 }
 
-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',
-      },
-    ],
-  },
-];
 // Title and description are pulled from <h1> and <Subtitle> in the MDX.
 export const metadata: Metadata = {
   title: null,

diff --git a/docs/src/app/new/layout.css b/docs/src/app/new/layout.css
@@ -28,32 +28,28 @@
     --root-layout-padding-x: 0rem;
     padding-inline: var(--root-layout-padding-x);
 
-    @media (--sm) {
-      --root-layout-padding-x: 2rem;
-    }
-
     @media (--show-side-nav) {
       --root-layout-padding-x: 3rem;
-    }
 
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      background-color: var(--color-gridline);
-      height: 1px;
-      right: 0;
-      left: 0;
-    }
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: var(--color-gridline);
+        height: 1px;
+        right: 0;
+        left: 0;
+      }
 
-    &::before {
-      top: 3rem;
-      margin-top: -1px;
-    }
+      &::before {
+        top: var(--header-height);
+        margin-top: -1px;
+      }
 
-    &::after {
-      bottom: 3rem;
-      margin-bottom: -1px;
+      &::after {
+        bottom: var(--header-height);
+        margin-bottom: -1px;
+      }
     }
   }
 
@@ -64,9 +60,9 @@
     min-height: 100dvh;
     max-width: calc(var(--breakpoint-max-layout-width) - var(--root-layout-padding-x) * 2);
     flex-direction: column;
-    padding-bottom: 3rem;
+    padding-bottom: var(--header-height);
 
-    @media (--sm) {
+    @media (--show-side-nav) {
       &::before,
       &::after {
         content: '';

diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
@@ -1,27 +1,43 @@
 @layer components {
   .Header {
     @apply text-sm;
+    height: var(--header-height);
+    width: 100%;
+  }
+
+  .HeaderInner {
+    height: inherit;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-inline: 1.5rem;
-    height: 3rem;
+
+    position: fixed;
+    top: 0;
+    inset-inline: 0;
+    box-shadow: inset 0 -1px var(--color-gridline);
+    background-color: var(--color-gray-50);
+    z-index: 1;
+
+    @media (--show-side-nav) {
+      position: static;
+      box-shadow: none;
+      background-color: transparent;
+    }
   }
 
-  .HeaderLink {
+  .HeaderLink,
+  .HeaderButton {
     display: flex;
     align-items: center;
     gap: 0.375rem;
-    padding: 0.25rem;
-    margin: -0.25rem;
+    padding: 0.25rem 0.5rem;
+    margin: -0.25rem -0.5rem;
     border-radius: var(--radius-md);
 
-    @media (hover: hover) {
-      &:hover {
-        text-decoration: underline;
-        text-decoration-color: var(--color-gray-500);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 2px;
+    @media not (hover: hover) {
+      &:active {
+        color: var(--color-gray-500);
       }
     }
 
@@ -35,4 +51,28 @@
       flex-shrink: 0;
     }
   }
+
+  .HeaderButton {
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-gray-100);
+      }
+    }
+    @media not (hover: hover) {
+      &:active {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+
+  .HeaderLink {
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+        text-decoration-color: var(--color-gray-500);
+        text-decoration-thickness: 1px;
+        text-underline-offset: 2px;
+      }
+    }
+  }
 }