UI: add default icon styles (transformer) to sidebar tabs

.changeset/grumpy-cups-brush.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Add default icon styles (`transformer`) to sidebar tabs

packages/ui/src/components/layout/root-toggle.tsx

@@ -64,7 +64,7 @@ export function RootToggle({
           )}
         >
           {item}
-          <ChevronDown className="me-1.5 size-4 text-fd-muted-foreground" />
+          <ChevronDown className="me-2 size-4 text-fd-muted-foreground" />
         </PopoverTrigger>
       ) : null}
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] overflow-hidden p-0">

packages/ui/src/layouts/docs.tsx

@@ -78,7 +78,7 @@ export function DocsLayout({
 
   const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
   const variables = cn(
-    '[--fd-tocnav-height:36px] md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] xl:[--fd-tocnav-height:0px]',
+    '[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:[--fd-toc-width:268px] xl:[--fd-tocnav-height:0px]',
     !navReplace && navEnabled
       ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
       : undefined,
@@ -147,14 +147,14 @@ export function DocsLayout({
                 </SearchOnly>
               </SidebarHeader>
               <SidebarViewport>
-                <div className="px-2 pt-4 empty:hidden md:hidden">
+                <div className="pt-4 empty:hidden md:hidden">
                   {links
                     .filter((v) => v.type !== 'icon')
                     .map((item, i) => (
                       <SidebarLinkItem key={i} item={item} />
                     ))}
                 </div>
-                <div className="px-2 py-4 md:px-3">
+                <div className="py-4">
                   <SidebarPageTree components={sidebarComponents} />
                 </div>
               </SidebarViewport>

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

@@ -59,13 +59,13 @@ interface InternalContext {
 }
 
 const itemVariants = cva(
-  'flex flex-row items-center gap-2 rounded-md px-3 py-2 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] md:px-2 md:py-1.5 [&_svg]:size-4',
+  'flex flex-row items-center gap-2 rounded-md p-2 text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4',
   {
     variants: {
       active: {
         true: 'bg-fd-primary/10 font-medium text-fd-primary',
         false:
-          'hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
+          'transition-colors duration-100 hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
       },
     },
   },
@@ -185,10 +185,7 @@ export function SidebarHeader(props: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       {...props}
-      className={cn(
-        'flex flex-col gap-2 px-4 empty:hidden md:px-3',
-        props.className,
-      )}
+      className={cn('flex flex-col gap-2 px-4 empty:hidden', props.className)}
     >
       {props.children}
     </div>
@@ -213,6 +210,7 @@ export function SidebarViewport(props: ScrollAreaProps) {
   return (
     <ScrollArea {...props} className={cn('h-full', props.className)}>
       <ScrollViewport
+        className="px-4"
         style={{
           maskImage: 'linear-gradient(to bottom, transparent 2px, white 16px)',
         }}
@@ -228,7 +226,7 @@ export function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>) {
     <p
       {...props}
       className={cn(
-        'mb-2 mt-8 px-3 text-sm font-medium first:mt-0 md:px-2',
+        'mb-2 mt-8 px-2 text-sm font-medium first:mt-0',
         props.className,
       )}
     >
@@ -291,7 +289,7 @@ export function SidebarFolderTrigger(props: CollapsibleTriggerProps) {
   return (
     <CollapsibleTrigger
       {...props}
-      className={cn(itemVariants({ active: false }), 'w-full pe-3.5 md:pe-1.5')}
+      className={cn(itemVariants({ active: false }), 'w-full')}
     >
       {props.children}
       <ChevronDown
@@ -314,11 +312,7 @@ export function SidebarFolderLink(props: LinkProps) {
     <Link
       {...props}
       data-active={active}
-      className={cn(
-        itemVariants({ active }),
-        'w-full pe-3.5 md:pe-1.5',
-        props.className,
-      )}
+      className={cn(itemVariants({ active }), 'w-full', props.className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).hasAttribute('data-icon')) {
           setOpen((prev) => !prev);

packages/ui/src/layouts/notebook.tsx

@@ -71,7 +71,7 @@ export function DocsLayout({
 
   const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
   const variables = cn(
-    '[--fd-nav-height:3.5rem] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] xl:[--fd-tocnav-height:0px]',
+    '[--fd-nav-height:3.5rem] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:[--fd-toc-width:268px] xl:[--fd-tocnav-height:0px]',
   );
 
   const pageStyles: PageStyles = {
@@ -112,16 +112,16 @@ export function DocsLayout({
               </SidebarHeaderItems>
               {sidebarBanner}
               {tabs.length > 0 ? (
-                <RootToggle options={tabs} className="md:-mx-2" />
+                <RootToggle options={tabs} className="-mx-2" />
               ) : null}
             </SidebarHeader>
             <SidebarViewport>
-              <div className="px-4 pt-4 empty:hidden md:px-3 lg:hidden">
+              <div className="pt-4 empty:hidden lg:hidden">
                 {links.map((item, i) => (
                   <SidebarLinkItem key={i} item={item} />
                 ))}
               </div>
-              <div className="p-4 md:px-3">
+              <div className="py-4">
                 <SidebarPageTree components={sidebarComponents} />
               </div>
             </SidebarViewport>

packages/ui/src/utils/get-sidebar-tabs.tsx

@@ -5,9 +5,20 @@ export interface TabOptions {
   transform?: (option: Option, node: PageTree.Folder) => Option | null;
 }
 
+const defaultTransform: TabOptions['transform'] = (option, node) => {
+  if (!node.icon) return option;
+
+  return {
+    ...option,
+    icon: (
+      <div className="bg-fd-background/80 p-1 [&_svg]:size-5">{node.icon}</div>
+    ),
+  };
+};
+
 export function getSidebarTabs(
   pageTree: PageTree.Root,
-  { transform }: TabOptions = {},
+  { transform = defaultTransform }: TabOptions = {},
 ): Option[] {
   function findOptions(node: PageTree.Folder): Option[] {
     const results: Option[] = [];