UI: Mount all children of tabs by default

.changeset/lazy-stars-knock.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Mount all children of tabs by default

packages/ui/css/vitepress.css

@@ -63,16 +63,13 @@
 
 #nd-sidebar {
   background-color: hsl(240, 6%, 97%);
+  border-color: transparent;
 }
 
 .dark #nd-sidebar {
   background-color: hsl(240, 4%, 9%);
 }
 
-#nd-sidebar > div {
-  border-color: transparent;
-}
-
 button[data-search-full] {
   background-color: var(--color-fd-background);
 }

packages/ui/src/components/layout/sidebar.tsx

@@ -151,9 +151,8 @@ export function Sidebar({
       data-collapsed={collapsed}
       className={cn(
         'sticky shrink-0 flex flex-col items-end top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) w-(--fd-sidebar-width) *:w-(--fd-sidebar-width) border-e max-md:hidden',
-        'transition-[translate,margin,opacity,width] duration-250',
+        'transition-[translate,margin,opacity,width] duration-200',
         collapsed && [
-          'rounded-e-xl',
           hover
             ? 'z-50'
             : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
@@ -391,7 +390,7 @@ export function SidebarFolderContent(props: CollapsibleContentProps) {
         )}
       >
         {ctx.level === 1 && (
-          <div className="absolute w-px inset-y-0 bg-fd-border start-3" />
+          <div className="absolute w-px inset-y-1 bg-fd-border start-2.5" />
         )}
         {props.children}
       </Context.Provider>
@@ -536,7 +535,7 @@ function PageTreeFolder({
 }
 
 function getOffset(level: number) {
-  return `calc(var(--spacing) * ${level > 1 ? (level - 1) * 3 + 3 : 2})`;
+  return `calc(var(--spacing) * ${level > 1 ? level * 2.5 : 2})`;
 }
 
 function Border({ level, active }: { level: number; active?: boolean }) {
@@ -545,7 +544,7 @@ function Border({ level, active }: { level: number; active?: boolean }) {
   return (
     <div
       className={cn(
-        'absolute w-px inset-y-3 z-[2] start-3 md:inset-y-2',
+        'absolute w-px inset-y-3 z-[2] start-2.5 md:inset-y-2',
         active && 'bg-fd-primary',
       )}
     />

packages/ui/src/components/tabs.tsx

@@ -214,8 +214,9 @@ export function TabsContent({ value, className, ...props }: TabsContentProps) {
   return (
     <Primitive.TabsContent
       value={value}
+      forceMount
       className={cn(
-        'prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
+        'prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
         className,
       )}
       {...props}

packages/ui/src/layouts/docs.tsx

@@ -79,7 +79,7 @@ export function DocsLayout({
   const links = getLinks(props.links ?? [], props.githubUrl);
 
   const variables = cn(
-    '[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]',
+    '[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:290px] xl:[--fd-toc-width:290px] xl:[--fd-tocnav-height:0px]',
     !nav.component && nav.enabled !== false
       ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
       : undefined,