UI: Fix sidebar layout shifts with defaultOpen option

Author: fuma-nama

.changeset/all-maps-check.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix sidebar layout shifts with `defaultOpen` option

packages/ui/css/preset.css

@@ -72,6 +72,12 @@
   }
 }
 
+@property --radix-collapsible-content-height {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
 @utility container {
   margin-inline: auto;
   padding-inline: 1rem;

packages/ui/src/components/ui/collapsible.tsx

@@ -1,21 +1,30 @@
+'use client';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { cn } from '@/utils/cn';
 
 const Collapsible = CollapsiblePrimitive.Root;
 
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 const CollapsibleContent = forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
 >(({ children, ...props }, ref) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <CollapsiblePrimitive.CollapsibleContent
       ref={ref}
       {...props}
       className={cn(
-        'overflow-hidden [--radix-collapsible-content-height:0px] data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down',
+        'overflow-hidden',
+        mounted &&
+          'data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down',
         props.className,
       )}
     >