From dfc3e184cbc7d21753a0acd747eec5a1cb4a8313 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Fri, 7 Feb 2025 08:57:19 -0500
Subject: [PATCH] feat: make the side bar sticky by default

---
 src/layout/InkLayout/InkLayout.stories.tsx | 21 +++++++++++++++++++++
 src/layout/InkLayout/InkLayout.tsx         | 17 +++++++++++++----
 src/layout/InkParts/InkPageLayout.tsx      |  2 +-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/layout/InkLayout/InkLayout.stories.tsx b/src/layout/InkLayout/InkLayout.stories.tsx
index 701ec51..b5efb38 100644
--- a/src/layout/InkLayout/InkLayout.stories.tsx
+++ b/src/layout/InkLayout/InkLayout.stories.tsx
@@ -78,3 +78,24 @@ export const SideNavWithCustomButtons: Story = {
     ),
   },
 };
+
+/**
+ * The side nav can be a custom component for routing, for instance, if you want to use NextJS' own {`<Link />`} component.
+ */
+export const StickySideNav: Story = {
+  args: {
+    children: (
+      <InkPageLayout>
+        <InkPanel className="ink:h-[2000px]">
+          <div className="ink:flex ink:flex-col ink:flex-1">
+            <div className="ink:flex-grow">
+              If the main content is bigger than the screen, the side nav will
+              be sticky.
+            </div>
+            <div className="ink:flex ink:flex-0">Bottom</div>
+          </div>
+        </InkPanel>
+      </InkPageLayout>
+    ),
+  },
+};
diff --git a/src/layout/InkLayout/InkLayout.tsx b/src/layout/InkLayout/InkLayout.tsx
index 31a03a2..4d08933 100644
--- a/src/layout/InkLayout/InkLayout.tsx
+++ b/src/layout/InkLayout/InkLayout.tsx
@@ -34,7 +34,7 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
     <>
       <div
         className={classNames(
-          "ink:flex ink:flex-col ink:h-full ink:pb-5 ink:min-w-[320px] ink:font-default ink:text-text-default ink:gap-5 ink:box-border ink:w-full",
+          "ink:flex ink:flex-col ink:min-h-full ink:min-w-[320px] ink:font-default ink:text-text-default ink:gap-5 ink:box-border ink:w-full",
           className
         )}
       >
@@ -73,21 +73,30 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
         </div>
         <div
           className={classNames(
-            "ink:flex ink:flex-1 ink:box-border ink:shrink-0 ink:w-full",
+            "ink:flex ink:flex-1 ink:box-border ink:shrink-0 ink:w-full ink:relative",
             !snug && "ink:px-3 ink:sm:px-5",
             sideNavigation && "ink:lg:pl-0"
           )}
         >
           {sideNavigation && (
             <div
+              style={
+                {
+                  /** Header height + header top padding + header-content gap */
+                  "--ink-side-nav-height":
+                    "calc(var(--ink-spacing-6) + var(--ink-spacing-5) + var(--ink-spacing-4))",
+                } as React.CSSProperties
+              }
               className={classNames(
-                "ink:w-[244px] ink:px-4 ink:hidden ink:lg:block ink:shrink-0 ink:box-border"
+                "ink:w-[244px] ink:px-4 ink:hidden ink:lg:block ink:shrink-0 ink:box-border ink:sticky ink:z-10 ink:bottom-0 ink:top-(--ink-side-nav-height) ink:max-h-[calc(100vh-var(--ink-side-nav-height))]"
               )}
             >
               {sideNavigation}
             </div>
           )}
-          {children}
+          <div className="ink:flex-grow ink:flex ink:box-border ink:pb-5">
+            {children}
+          </div>
         </div>
       </div>
       {isMobileNavOpen && (
diff --git a/src/layout/InkParts/InkPageLayout.tsx b/src/layout/InkParts/InkPageLayout.tsx
index 3d485e7..8ed4877 100644
--- a/src/layout/InkParts/InkPageLayout.tsx
+++ b/src/layout/InkParts/InkPageLayout.tsx
@@ -12,7 +12,7 @@ export const InkPageLayout: React.FC<InkPageLayoutProps> = ({
   return (
     <div
       className={classNames(
-        "ink:grid ink:gap-1 ink:*:h-full ink:auto-rows-min ink:md:auto-rows-auto ink:flex-1",
+        "ink:grid ink:gap-1 ink:*:min-h-full ink:auto-rows-min ink:md:auto-rows-auto ink:flex-1",
         variantClassNames(columns, {
           1: "ink:grid-cols-1",
           2: "ink:md:grid-cols-[minmax(240px,1fr)_360px]",