UI: Fix notebook layout bugs

.changeset/warm-kings-marry.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix Notebook layout minor UI inconsistency

apps/docs/app/docs/layout.tsx

@@ -75,10 +75,9 @@ export default function Layout({ children }: { children: ReactNode }) {
               ...option,
               icon: (
                 <div
-                  className="[&_svg]:size-full rounded-lg size-full max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5"
+                  className="[&_svg]:size-full rounded-lg size-full text-(--tab-color) max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5"
                   style={
                     {
-                      color,
                       '--tab-color': color,
                     } as object
                   }

packages/ui/src/layouts/docs.tsx

@@ -90,7 +90,7 @@ export function DocsLayout({
       {sidebarCollapsible ? <CollapsibleControl /> : null}
       <Sidebar {...sidebarProps} collapsible={sidebarCollapsible}>
         <HideIfEmpty>
-          <SidebarHeader>
+          <SidebarHeader className="data-[empty=true]:hidden">
             <div className="flex max-md:hidden">
               <Link
                 href={nav.url ?? '/'}
@@ -135,9 +135,9 @@ export function DocsLayout({
             ))}
           <SidebarPageTree components={sidebarComponents} />
         </SidebarViewport>
-        <SidebarFooter className="empty:hidden">
-          <HideIfEmpty>
-            <div className="flex items-center justify-end">
+        <HideIfEmpty>
+          <SidebarFooter className="data-[empty=true]:hidden">
+            <div className="flex items-center justify-end empty:hidden">
               {links
                 .filter((item) => item.type === 'icon')
                 .map((item, i, arr) => (
@@ -165,9 +165,9 @@ export function DocsLayout({
                   <ThemeToggle className="p-0" mode={themeSwitch.mode} />
                 ))}
             </div>
-          </HideIfEmpty>
-          {sidebarFooter}
-        </SidebarFooter>
+            {sidebarFooter}
+          </SidebarFooter>
+        </HideIfEmpty>
       </Sidebar>
     </>
   );

packages/ui/src/layouts/notebook-client.tsx

@@ -104,7 +104,7 @@ export function LayoutTabs({
     <div
       {...props}
       className={cn(
-        'flex flex-row items-end gap-6 overflow-auto',
+        'flex flex-row items-center gap-2 overflow-auto',
         props.className,
       )}
     >
@@ -129,8 +129,8 @@ function LayoutTab({
   return (
     <Link
       className={cn(
-        'inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap',
-        selected && 'text-fd-foreground font-medium border-fd-primary',
+        'inline-flex rounded-full items-center px-2 py-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap',
+        selected && 'bg-fd-primary/10 text-fd-primary',
       )}
       href={option.url}
     >

packages/ui/src/layouts/notebook.tsx

@@ -123,7 +123,7 @@ export function DocsLayout(props: DocsLayoutProps) {
             )}
           >
             <HideIfEmpty>
-              <SidebarHeader>
+              <SidebarHeader className="data-[empty=true]:hidden">
                 {navMode === 'auto' && sidebarHeader}
                 {nav.children}
                 {sidebarBanner}
@@ -152,7 +152,7 @@ export function DocsLayout(props: DocsLayoutProps) {
               <SidebarPageTree components={sidebarComponents} />
             </SidebarViewport>
             <HideIfEmpty>
-              <SidebarFooter className="flex flex-row items-center justify-end">
+              <SidebarFooter className="flex flex-row items-center justify-end data-[empty=true]:hidden">
                 <div className="flex items-center flex-1 empty:hidden lg:hidden">
                   {links
                     .filter((item) => item.type === 'icon')
@@ -337,7 +337,10 @@ function DocsNavbar({
       </div>
       {tabs.length > 0 && (
         <LayoutTabs
-          className="px-6 border-b h-10 max-lg:hidden"
+          className={cn(
+            'border-b h-10 max-lg:hidden',
+            navMode === 'top' ? 'px-4' : 'px-6',
+          )}
           options={tabs}
         />
       )}