UI: Prevent shrink on sidebar icons by default

fuma-nama · Jan 19, 2025 · 900eb6c · 900eb6c
1 parent 777188b
commit 900eb6c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/orange-lemons-hang.md b/.changeset/orange-lemons-hang.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Prevent shrink on sidebar icons by default
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/packages/ui/src/layouts/docs.tsx b/packages/ui/src/layouts/docs.tsx
@@ -121,7 +121,7 @@ export function DocsLayout({
         >
           {collapsible ? (
             <SidebarCollapseTrigger
-              className="fixed bottom-3 z-30 data-[collapsed=false]:hidden max-md:hidden"
+              className="fixed bottom-3 z-30 backdrop-blur-lg data-[collapsed=false]:hidden max-md:hidden"
               style={{
                 insetInlineStart: 'calc(var(--fd-layout-offset) + 0.5rem)',
               }}

diff --git a/packages/ui/src/layouts/docs/sidebar.tsx b/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 p-2 text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4',
+  'flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       active: {
         true: 'bg-fd-primary/10 font-medium text-fd-primary',
         false:
-          'transition-colors duration-100 hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
+          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
       },
     },
   },
@@ -358,7 +358,6 @@ export function SidebarCollapseTrigger(
           color: 'ghost',
           size: 'icon',
         }),
-        'backdrop-blur-lg',
         props.className,
       )}
       onClick={() => {