From a1c82a424d307f836d58f2711e6b6a96268de970 Mon Sep 17 00:00:00 2001 From: Ahmadullah mirza Date: Sat, 28 Dec 2024 19:28:10 +0530 Subject: [PATCH] docs(sidebar): add collapsed width guide for icon variant --- apps/www/content/docs/components/sidebar.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx index 1fed0194573..c541b895446 100644 --- 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 }} >