add sticky option to the sidebar

piotrkulpinski · Feb 26, 2024 · 401386e · 401386e
1 parent 6a979fc
commit 401386e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/layout/Sidebar/Sidebar.tsx b/src/layout/Sidebar/Sidebar.tsx
@@ -20,12 +20,12 @@ export type SidebarElement = HTMLDivElement
 export type SidebarProps = HTMLAttributes<SidebarElement> & VariantProps<typeof sidebarVariants>
 
 export const SidebarBase = forwardRef<SidebarElement, SidebarProps>((props, ref) => {
-  const { className, theme, size, floating, ...rest } = props
+  const { className, theme, size, floating, sticky, ...rest } = props
 
   return (
     <div
       ref={ref}
-      className={cx(sidebarVariants({ theme, size, floating, className }))}
+      className={cx(sidebarVariants({ theme, size, floating, sticky, className }))}
       {...rest}
     />
   )
@@ -80,6 +80,7 @@ Sidebar.defaultProps = {
   theme: "white",
   size: "md",
   floating: false,
+  sticky: true,
 }
 
 Sidebar.displayName = "Sidebar"
diff --git a/src/layout/Sidebar/Sidebar.variants.ts b/src/layout/Sidebar/Sidebar.variants.ts
@@ -1,7 +1,7 @@
 import { cva } from "../../shared"
 
 export const sidebarVariants = cva({
-  base: "@container/sidebar sticky flex shrink-0 flex-col gap-y-5 p-5 border",
+  base: "@container/sidebar flex shrink-0 flex-col gap-y-5 p-5 -m-px border",
 
   variants: {
     theme: {
@@ -14,15 +14,25 @@ export const sidebarVariants = cva({
       lg: "w-72",
     },
     floating: {
-      true: "inset-y-2 h-[calc(100dvh-1rem)] m-2 rounded-md shadow-sm",
-      false: "inset-y-0 h-[calc(100dvh+2px)] -m-px",
+      true: "m-2 rounded-md shadow-sm",
+      false: "mr-0",
+    },
+    sticky: {
+      true: "sticky",
+      false: "relative",
     },
   },
 
+  compoundVariants: [
+    { floating: true, sticky: true, class: "inset-y-2 h-[calc(100dvh-1rem)]" },
+    { floating: false, sticky: true, class: "-inset-y-px h-[calc(100dvh+2px)]" },
+  ],
+
   defaultVariants: {
     theme: "white",
     size: "md",
     floating: false,
+    sticky: true,
   },
 })
 

diff --git a/src/ui/Button/Button.variants.ts b/src/ui/Button/Button.variants.ts
@@ -21,7 +21,7 @@ export const buttonVariants = cva({
         "border-purple-dark/25 text-purple-dark hover:border-purple-dark/40 focus-visible:border-purple-dark/40 focus-visible:ring-purple-light",
     },
     variant: {
-      solid: "",
+      solid: "!border-transparent",
       outline: "",
       soft: "shadow-none",
       ghost: "shadow-none hover:border-transparent",