Merge pull request #93 from inkonchain/feat/sticky-layout

feat: make the side bar sticky by default
inkonchain · Feb 7, 2025 · 321bf3d · 321bf3d
2 parents 9a16c44 + dfc3e18
commit 321bf3d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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]",