fix: collapsible animations

pmndrs · Sep 2, 2024 · 578c7c1 · 578c7c1
1 parent 4202ddc
commit 578c7c1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Nav/NavCategory.tsx b/src/components/Nav/NavCategory.tsx
@@ -4,7 +4,7 @@ import { Doc } from '@/app/[...slug]/DocsContext'
 import cn from '@/lib/cn'
 import * as Collapsible from '@radix-ui/react-collapsible'
 import Link from 'next/link'
-import { ComponentProps, useState } from 'react'
+import { ComponentProps, useEffect, useState } from 'react'
 import { IoIosArrowDown } from 'react-icons/io'
 
 const INDEX_PAGE = 'introduction'
@@ -25,6 +25,12 @@ export function NavCategory({
 
   const [open, setOpen] = useState(docsEntries.some(([, doc]) => doc.url === `/${asPath}`))
 
+  useEffect(() => {
+    const dur = '.2s'
+    document.documentElement.style.setProperty('--collapsible-down-duration', dur)
+    document.documentElement.style.setProperty('--collapsible-up-duration', dur)
+  }, [])
+
   return (
     <Collapsible.Root
       className={cn(
@@ -52,7 +58,7 @@ export function NavCategory({
         </Collapsible.Trigger>
       </div>
 
-      <Collapsible.Content className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden">
+      <Collapsible.Content className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
         <ul>
           {docsEntries
             .filter(([page]) => page !== INDEX_PAGE)

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,20 +11,20 @@ const config: Config = {
       fontFamily: {
         mono: ['"Inconsolata"', ...defaultTheme.fontFamily.mono],
       },
-      // keyframes: {
-      //   'collapsible-down': {
-      //     from: { height: '0' },
-      //     to: { height: 'var(--radix-collapsible-content-height)' },
-      //   },
-      //   'collapsible-up': {
-      //     from: { height: 'var(--radix-collapsible-content-height)' },
-      //     to: { height: '0' },
-      //   },
-      // },
-      // animation: {
-      //   'collapsible-down': 'collapsible-down 0.2s ease-out',
-      //   'collapsible-up': 'collapsible-up 0.2s ease-out',
-      // },
+      keyframes: {
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'collapsible-down': 'collapsible-down var(--collapsible-down-duration, 0s) ease-out',
+        'collapsible-up': 'collapsible-up var(--collapsible-up-duration, 0s) ease-out',
+      },
     },
   },
 }