UI: Add collapse button back to sidebar

.changeset/cyan-peaches-own.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Add collapse button back to sidebar on Notebook layout

packages/ui/src/layouts/docs/sidebar.tsx

@@ -168,7 +168,7 @@ export function Sidebar({
         <div
           {...inner}
           className={cn(
-            'flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:pt-4',
+            'flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e',
             inner?.className,
           )}
         >

packages/ui/src/layouts/notebook.tsx

@@ -116,14 +116,25 @@ export function DocsLayout({
             )}
           >
             <SidebarHeader>
-              {nav.title && navMode === 'auto' ? (
-                <Link
-                  href={nav.url ?? '/'}
-                  className="inline-flex items-center gap-2.5 py-1 font-medium max-md:hidden"
-                >
-                  {nav.title}
-                </Link>
-              ) : null}
+              {navMode === 'auto' && (
+                <div className="flex flex-row items-center justify-between min-h-14 -my-2 max-md:hidden">
+                  <Link
+                    href={nav.url ?? '/'}
+                    className="inline-flex items-center gap-2.5 py-1 font-medium"
+                  >
+                    {nav.title}
+                  </Link>
+                  <SidebarCollapseTrigger
+                    className={cn(
+                      buttonVariants({
+                        color: 'ghost',
+                        size: 'icon-sm',
+                      }),
+                      'text-fd-muted-foreground',
+                    )}
+                  />
+                </div>
+              )}
               {nav.children}
               {sidebarBanner}
               {tabMode === 'sidebar' && tabs.length > 0 ? (
@@ -206,29 +217,37 @@ function DocsNavbar({
           : undefined
       }
     >
-      <div className="flex flex-row border-b border-fd-foreground/10 px-4 flex-1 md:px-6">
+      <div
+        className={cn(
+          'flex flex-row border-b border-fd-foreground/10 px-4 flex-1',
+          navMode === 'auto' && 'md:px-6',
+        )}
+      >
         <div
           className={cn(
             'flex flex-row items-center',
-            navMode === 'top' && 'flex-1',
+            navMode === 'top' && 'flex-1 pe-4',
           )}
         >
-          <Title
-            url={nav.url}
-            title={nav.title}
-            className={cn(navMode === 'auto' ? 'md:hidden' : 'pe-6')}
-          />
-          {sidebarCollapsible ? (
+          {sidebarCollapsible && navMode === 'auto' ? (
             <SidebarCollapseTrigger
               className={cn(
                 buttonVariants({
                   color: 'ghost',
-                  size: 'icon',
+                  size: 'icon-sm',
                 }),
-                'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden',
+                'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden',
               )}
             />
           ) : null}
+          <Title
+            url={nav.url}
+            title={nav.title}
+            className={cn(
+              // show on sidebar on above md
+              navMode === 'auto' && 'md:hidden',
+            )}
+          />
         </div>
 
         <LargeSearchToggle
@@ -278,6 +297,17 @@ function DocsNavbar({
             className="ms-2 max-md:hidden"
             mode="light-dark-system"
           />
+          {sidebarCollapsible && navMode === 'top' ? (
+            <SidebarCollapseTrigger
+              className={cn(
+                buttonVariants({
+                  color: 'secondary',
+                  size: 'icon-sm',
+                }),
+                'ms-2 text-fd-muted-foreground rounded-full max-md:hidden',
+              )}
+            />
+          ) : null}
         </div>
       </div>
       {tabs.length > 0 ? (

packages/ui/src/page.client.tsx

@@ -69,7 +69,7 @@ export function TocPopoverHeader(props: HTMLAttributes<HTMLDivElement>) {
             'border-b border-fd-foreground/10 backdrop-blur-md transition-colors',
             (!isTransparent || open) && 'bg-fd-background/80',
             open && 'shadow-lg',
-            sidebar.open && 'opacity-0',
+            sidebar.open && 'max-md:hidden',
           )}
         >
           {props.children}