docs(sidebar): add collapsed width guide for icon variant

shadcn-ui · Dec 28, 2024 · a1c82a4 · a1c82a4
1 parent 1081536
commit a1c82a4
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
@@ -377,6 +377,11 @@ const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 ```
 
+For collapsed widht in icon variant sidebar 
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_WIDTH_ICON = "3rem"
+```
+
 For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
 
 To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
@@ -386,6 +391,7 @@ To set the width of the sidebar, you can use the `--sidebar-width` and `--sideba
   style={{
     "--sidebar-width": "20rem",
     "--sidebar-width-mobile": "20rem",
+    "--sidebar-width-icon": "3.5rem", // for icon variant sidebar, width when collapsed
   }}
 >
   <Sidebar />