[docs] Quick nav actually first (#1171)

mui · Dec 18, 2024 · 74a3d08 · 74a3d08
1 parent 1fdb2d8
commit 74a3d08
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 16 deletions.
diff --git a/docs/src/components/Demo/DemoSourceBrowser.tsx b/docs/src/components/Demo/DemoSourceBrowser.tsx
@@ -30,7 +30,7 @@ export function DemoSourceBrowser({
       <DemoCodeBlockContainer>
         <ScrollArea.Viewport
           style={{ overflow: undefined }}
-          render={({ children, ...props }) => {
+          render={({ children, tabIndex, ...props }) => {
             return <BaseDemo.SourceBrowser {...props} />;
           }}
         />
@@ -53,7 +53,7 @@ export function DemoSourceBrowser({
       >
         <ScrollArea.Viewport
           style={{ overflow: undefined }}
-          render={({ children, ...props }) => {
+          render={({ children, tabIndex, ...props }) => {
             return <BaseDemo.SourceBrowser aria-hidden={!collapsibleOpen} {...props} />;
           }}
         />

diff --git a/docs/src/components/QuickNav/QuickNav.css b/docs/src/components/QuickNav/QuickNav.css
@@ -17,10 +17,12 @@
 
     /* The variable is used in JS positioning logic */
     --top: -1px;
+    --margin-top: 5.75rem; /* Match hero code block top */
     @apply text-md;
     z-index: 1;
     position: sticky;
     top: var(--top);
+    margin-top: var(--margin-top);
     width: 0;
     float: right;
     contain: layout;

diff --git a/docs/src/components/QuickNav/QuickNav.tsx b/docs/src/components/QuickNav/QuickNav.tsx
@@ -65,7 +65,7 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
 
     ref.current.style.top = '0px';
     ref.current.style.bottom = '';
-    ref.current.style.marginTop = '';
+    ref.current.style.marginTop = '0px';
     ref.current.style.marginBottom = '';
 
     // Get the nav top Y coordinate from the start of the document
@@ -259,8 +259,8 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
   };
 }
 
-export function Title({ className, ...props }: React.ComponentProps<'h2'>) {
-  return <div aria-hidden className={clsx('QuickNavTitle', className)} {...props} />;
+export function Title({ className, ...props }: React.ComponentProps<'header'>) {
+  return <header className={clsx('QuickNavTitle', className)} {...props} />;
 }
 
 export function List({ className, ...props }: React.ComponentProps<'ul'>) {

diff --git a/docs/src/components/QuickNav/rehypeQuickNav.mjs b/docs/src/components/QuickNav/rehypeQuickNav.mjs
@@ -6,7 +6,6 @@ const TITLE = 'QuickNav.Title';
 const LIST = 'QuickNav.List';
 const ITEM = 'QuickNav.Item';
 const LINK = 'QuickNav.Link';
-const DOC_SUBTITLE = 'Subtitle';
 
 /**
  * @typedef {Object} TocEntry
@@ -21,11 +20,6 @@ const DOC_SUBTITLE = 'Subtitle';
  */
 export function rehypeQuickNav() {
   return (tree, file) => {
-    const h1 = tree.children.find(
-      /** @param {{ tagName: string; }} node */
-      (node) => node.tagName === 'h1',
-    );
-
     /** @type {TocEntry[]} */
     const toc = file.data.toc;
     const root = createMdxElement({
@@ -37,11 +31,7 @@ export function rehypeQuickNav() {
       return;
     }
 
-    // Place quick nav after the `<Subtitle>` that immediately follows the first `<h1>`,
-    // or after the first `<h1>` if a matching `<Subtitle>` wasn't found.
-    let index = tree.children.indexOf(h1) + 2; // Adding "2" because there's also a line break below h1
-    index = tree.children[index]?.name === DOC_SUBTITLE ? index + 1 : index;
-    tree.children.splice(index, 0, root);
+    tree.children.unshift(root);
   };
 }