UI: support sidebar specific colors on Shadcn UI theme

.changeset/yellow-readers-dance.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Shadcn UI theme: support sidebar specific colors

packages/ui/css/shadcn.css

@@ -16,3 +16,14 @@
   --color-fd-accent-foreground: var(--accent-foreground);
   --color-fd-ring: var(--ring);
 }
+
+#nd-sidebar {
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+  border-color: var(--sidebar-border);
+
+  --color-fd-accent: var(--sidebar-accent);
+  --color-fd-accent-foreground: var(--sidebar-accent-foreground);
+  --color-fd-ring: var(--sidebar-ring);
+  --color-fd-primary-foreground: var(--sidebar-primary-foreground);
+}

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

@@ -70,7 +70,7 @@ export function PageArticle(props: ComponentProps<'article'>) {
     <article
       {...props}
       className={cn(
-        'flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12',
+        'flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto 2xl:pt-12 2xl:px-12',
         props.className,
       )}
     >

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

@@ -105,7 +105,7 @@ export function LayoutTabs({
     <div
       {...props}
       className={cn(
-        'flex flex-row items-center gap-2 overflow-auto',
+        'flex flex-row items-center gap-4 overflow-auto',
         props.className,
       )}
     >
@@ -130,8 +130,8 @@ function LayoutTab({
   return (
     <Link
       className={cn(
-        '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',
+        'inline-flex border-b border-transparent transition-colors items-center py-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap',
+        selected && 'border-fd-primary text-fd-primary',
       )}
       href={option.url}
     >

packages/ui/src/layouts/notebook/index.tsx

@@ -295,11 +295,20 @@ function DocsNavbar({
     <Navbar mode={navMode}>
       <div
         className={cn(
-          'flex border-b px-2.5 gap-2 flex-1 md:px-4',
+          'flex border-b px-4 gap-2 flex-1',
           navMode === 'auto' && 'md:px-6',
         )}
       >
-        <div className={cn('flex items-center', navMode === 'top' && 'flex-1')}>
+        <div
+          className={cn(
+            'items-center',
+            navMode === 'top' && 'flex flex-1',
+            navMode === 'auto' && [
+              'hidden max-md:flex',
+              sidebarCollapsible && 'has-data-[collapsed=true]:md:flex',
+            ],
+          )}
+        >
           {sidebarCollapsible && navMode === 'auto' && (
             <SidebarCollapseTrigger
               className={cn(
@@ -316,7 +325,7 @@ function DocsNavbar({
           <Link
             href={nav.url ?? '/'}
             className={cn(
-              'inline-flex items-center gap-2.5 font-semibold empty:hidden',
+              'inline-flex items-center gap-2.5 font-semibold',
               navMode === 'auto' && 'md:hidden',
             )}
           >
@@ -378,7 +387,7 @@ function DocsNavbar({
               (searchToggle.components?.sm ?? (
                 <SearchToggle hideIfDisabled className="p-2" />
               ))}
-            <NavbarSidebarTrigger className="p-2" />
+            <NavbarSidebarTrigger className="p-2 -me-1.5" />
           </div>
 
           <div className="flex items-center gap-2 max-md:hidden">