feat: update Sidebar component to use 'floating' variant with new styles for improved appearance

paanSinghCoder · paanSinghCoder · commit c0c7d2296081 · 2026-03-27T16:12:42.000+05:30
diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
@@ -86,7 +86,7 @@ const Page = () => {
           backgroundColor: 'var(--rs-color-background-base-primary)'
         }}
       >
-        <Sidebar defaultOpen variant='plain'>
+        <Sidebar defaultOpen variant='floating'>
           <Sidebar.Header>
             <Flex align='center' gap={3}>
               <IconButton
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
@@ -22,6 +22,9 @@
 
 .root[data-variant="floating"] {
   box-shadow: var(--rs-shadow-lifted);
+  border-radius: var(--rs-radius-3);
+  margin: var(--rs-space-4);
+  border: 0.5px solid var(--rs-color-border-base-primary);
 }
 
 .root[data-variant="inset"] {

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ const Page = () => {`
`86`	`86`	`backgroundColor: 'var(--rs-color-background-base-primary)'`
`87`	`87`	`}}`
`88`	`88`	`>`
`89`		`- <Sidebar defaultOpen variant='plain'>`
	`89`	`+ <Sidebar defaultOpen variant='floating'>`
`90`	`90`	`<Sidebar.Header>`
`91`	`91`	`<Flex align='center' gap={3}>`
`92`	`92`	`<IconButton`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,9 @@`
`22`	`22`
`23`	`23`	`.root[data-variant="floating"] {`
`24`	`24`	`box-shadow: var(--rs-shadow-lifted);`
	`25`	`+ border-radius: var(--rs-radius-3);`
	`26`	`+ margin: var(--rs-space-4);`
	`27`	`+ border: 0.5px solid var(--rs-color-border-base-primary);`
`25`	`28`	`}`
`26`	`29`
`27`	`30`	`.root[data-variant="inset"] {`