fix styles and animation

shuding · Aug 22, 2022 · 6c58a89 · 6c58a89 · shuding · Aug 22, 2022
1 parent 8152abc
commit 6c58a89
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -10,7 +10,7 @@ export function Breadcrumb({
   activePath: Item[]
 }): ReactElement {
   return (
-    <div className="nextra-breadcrumb mt-2.5 flex gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current">
+    <div className="nextra-breadcrumb mt-2.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current">
       {activePath.map((item, index) => {
         const isLink = !item.children || item.withIndexPage
         const isActive = index === activePath.length - 1

diff --git a/packages/nextra-theme-docs/src/components/collapse.tsx b/packages/nextra-theme-docs/src/components/collapse.tsx
@@ -51,7 +51,7 @@ export function Collapse({
           if (container) {
             container.style.maxHeight = '0px'
           }
-        })
+        }, 0)
       }
     }
   }, [open])

diff --git a/packages/nextra-theme-docs/src/components/search.tsx b/packages/nextra-theme-docs/src/components/search.tsx
@@ -139,7 +139,7 @@ export function Search({
     >
       <kbd
         className={cn(
-          'absolute ltr:right-1.5 rtl:left-1.5 my-1.5 select-none',
+          'absolute ltr:right-1.5 rtl:left-1.5 top-0 my-1.5 select-none',
           'rounded bg-white px-1.5 h-5 font-mono font-medium text-gray-500 text-[10px]',
           'border dark:bg-dark/50 dark:border-gray-100/20',
           'contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current',

diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -164,11 +164,22 @@ const Details = ({
   const [openState, setOpen] = useState(!!open)
   const [summary, restChildren] = findSummary(children)
 
+  // To animate the close animation we have to delay the DOM node state here.
+  const [delayedOpenState, setDelayedOpenState] = useState(openState)
+  useEffect(() => {
+    if (openState) {
+      setDelayedOpenState(true)
+    } else {
+      const timeout = setTimeout(() => setDelayedOpenState(openState), 500)
+      return () => clearTimeout(timeout)
+    }
+  }, [openState])
+
   return (
     <details
       className="my-4 rounded border border-gray-200 bg-white p-2 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 first:mt-0 last:mb-0"
       {...props}
-      {...(openState && { open: true })}
+      {...(delayedOpenState && { open: true })}
     >
       <DetailsProvider value={setOpen}>{summary}</DetailsProvider>
       <Collapse open={openState}>{restChildren}</Collapse>