From 401386eef3af66121439f9e2afc1bfdea677c2d9 Mon Sep 17 00:00:00 2001
From: Piotr Kulpinski <piotr@kulpinski.pl>
Date: Mon, 26 Feb 2024 16:21:36 +0100
Subject: [PATCH] add sticky option to the sidebar

---
 src/layout/Sidebar/Sidebar.tsx         |  5 +++--
 src/layout/Sidebar/Sidebar.variants.ts | 16 +++++++++++++---
 src/ui/Button/Button.variants.ts       |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/layout/Sidebar/Sidebar.tsx b/src/layout/Sidebar/Sidebar.tsx
index 5b25024..a6f562c 100644
--- 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
index 46a49b3..f339299 100644
--- 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
index ddcc868..f62340f 100644
--- 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",