UI: Fix Notebook layout paddings

.changeset/ten-states-rescue.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix Notebook layout paddings

examples/next-mdx/content/docs/test2.mdx

@@ -1,6 +1,8 @@
 ---
 title: Fumadocs
-description: It's night, I love it
+description: You can just be minimal.
 ---
 
-Hey there! It's 12:13 AM now.
+## Overview
+
+Fumadocs is a docs framework.

packages/core/src/sidebar.tsx

@@ -8,12 +8,16 @@ import {
   type ReactNode,
   type ReactElement,
   type ComponentPropsWithoutRef,
+  useMemo,
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+const SidebarContext = createContext<SidebarContextType | null>(null);
 
-type SidebarContextType = [open: boolean, setOpen: (value: boolean) => void];
+type SidebarContextType = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+};
 
 export interface SidebarProviderProps {
   open?: boolean;
@@ -27,14 +31,19 @@ function useSidebarContext(): SidebarContextType {
   return ctx;
 }
 
-export function SidebarProvider(
-  props: SidebarProviderProps,
-): React.ReactElement {
-  const [openInner, setOpenInner] = useState(false);
+export function SidebarProvider(props: SidebarProviderProps) {
+  const [open, setOpen] =
+    props.open === undefined
+      ? // eslint-disable-next-line react-hooks/rules-of-hooks
+        useState(false)
+      : [props.open, props.onOpenChange];
 
   return (
     <SidebarContext.Provider
-      value={[props.open ?? openInner, props.onOpenChange ?? setOpenInner]}
+      value={useMemo(
+        () => ({ open, setOpen: setOpen ?? (() => undefined) }),
+        [open, setOpen],
+      )}
     >
       {props.children}
     </SidebarContext.Provider>
@@ -54,7 +63,7 @@ export function SidebarTrigger<T extends ElementType = 'button'>({
   as,
   ...props
 }: SidebarTriggerProps<T>): ReactElement {
-  const [open, setOpen] = useSidebarContext();
+  const { open, setOpen } = useSidebarContext();
   const As = as ?? 'button';
 
   return (
@@ -81,7 +90,7 @@ export function SidebarList<T extends ElementType = 'aside'>({
   blockScrollingWidth,
   ...props
 }: SidebarContentProps<T>): ReactElement {
-  const [open] = useSidebarContext();
+  const { open } = useSidebarContext();
   const [isBlocking, setIsBlocking] = useState(false);
 
   useEffect(() => {

packages/ui/src/layouts/docs.tsx

@@ -65,6 +65,7 @@ export function DocsLayout({
     ...sidebar
   } = {},
   i18n = false,
+  children,
   ...props
 }: DocsLayoutProps): ReactNode {
   checkPageTree(props.tree);
@@ -187,7 +188,7 @@ export function DocsLayout({
               tabs,
             },
           )}
-          <StylesProvider {...pageStyles}>{props.children}</StylesProvider>
+          <StylesProvider {...pageStyles}>{children}</StylesProvider>
         </main>
       </NavProvider>
     </TreeContextProvider>

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

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import {
   type ButtonHTMLAttributes,
   createContext,
+  Fragment,
   type HTMLAttributes,
   type PointerEventHandler,
   type ReactNode,
@@ -413,6 +414,7 @@ export function SidebarPageTree(props: {
   components?: Partial<SidebarComponents>;
 }) {
   const { root } = useTreeContext();
+  const idRef = useRef(0);
 
   return useMemo(() => {
     const { Separator, Item, Folder } = props.components ?? {};
@@ -422,12 +424,10 @@ export function SidebarPageTree(props: {
       level: number,
     ): ReactNode[] {
       return items.map((item, i) => {
-        const id = `${item.type}_${i}`;
-
         if (item.type === 'separator') {
-          if (Separator) return <Separator key={id} item={item} />;
+          if (Separator) return <Separator key={i} item={item} />;
           return (
-            <SidebarSeparator key={id} className={cn(i !== 0 && 'mt-8')}>
+            <SidebarSeparator key={i} className={cn(i !== 0 && 'mt-8')}>
               {item.icon}
               {item.name}
             </SidebarSeparator>
@@ -439,12 +439,12 @@ export function SidebarPageTree(props: {
 
           if (Folder)
             return (
-              <Folder key={id} item={item} level={level}>
+              <Folder key={i} item={item} level={level}>
                 {children}
               </Folder>
             );
           return (
-            <PageTreeFolder key={id} item={item}>
+            <PageTreeFolder key={i} item={item}>
               {children}
             </PageTreeFolder>
           );
@@ -464,8 +464,12 @@ export function SidebarPageTree(props: {
       });
     }
 
-    return renderSidebarList(root.children, 1);
-  }, [root, props.components]);
+    return (
+      <Fragment key={idRef.current++}>
+        {renderSidebarList(root.children, 1)}
+      </Fragment>
+    );
+  }, [props.components, root.children]);
 }
 
 function PageTreeFolder({

packages/ui/src/layouts/notebook.tsx

@@ -82,7 +82,7 @@ export function DocsLayout({
     '[--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]',
     tabs.length > 0 &&
       tabMode === 'navbar' &&
-      'lg:[--fd-nav-height:calc(var(--spacing)*26)]',
+      'lg:[--fd-nav-height:calc(var(--spacing)*24)]',
   );
 
   const pageStyles: PageStyles = {
@@ -114,10 +114,16 @@ export function DocsLayout({
               navMode === 'top' ? 'bg-transparent' : 'md:[--fd-nav-height:0px]',
               sidebar.className,
             )}
+            inner={{
+              className: cn(
+                navMode === 'top' ? 'md:pt-2.5' : 'md:pt-3.5',
+                tabMode === 'navbar' && 'md:pt-0',
+              ),
+            }}
           >
             <SidebarHeader>
               {navMode === 'auto' && (
-                <div className="flex flex-row justify-between -mt-0.5 max-md:hidden">
+                <div className="flex flex-row justify-between max-md:hidden">
                   <Link
                     href={nav.url ?? '/'}
                     className="inline-flex items-center gap-2.5 font-medium"