From 0daee68832d16fd4531b71692bc3e50ef76a15e4 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 2 Jun 2024 09:31:36 +0900
Subject: [PATCH] feat: make navigations sticky & scrollable

---
 packages/react/src/DocsLayout.tsx    | 2 +-
 packages/react/src/DynamicLayout.tsx | 2 +-
 packages/react/src/MainLayout.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/DocsLayout.tsx b/packages/react/src/DocsLayout.tsx
index 5313fec..228c297 100644
--- a/packages/react/src/DocsLayout.tsx
+++ b/packages/react/src/DocsLayout.tsx
@@ -6,7 +6,7 @@ function SideNav() {
   const location = useLocation();
 
   return (
-    <nav className="md:flex flex-col justify-start items-start gap-8 p-8 hidden">
+    <nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden">
       {Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
         return (
           <section
diff --git a/packages/react/src/DynamicLayout.tsx b/packages/react/src/DynamicLayout.tsx
index 753ec98..88542c3 100644
--- a/packages/react/src/DynamicLayout.tsx
+++ b/packages/react/src/DynamicLayout.tsx
@@ -47,7 +47,7 @@ export default function DynamicLayout({
           {children}
         </main>
       </div>
-      <nav className="hidden lg:flex flex-col gap-2 py-8 px-4">
+      <nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]">
         <span className="font-bold text-sm">On This Page</span>
 
         <RecursivelyToc toc={toc} />
diff --git a/packages/react/src/MainLayout.tsx b/packages/react/src/MainLayout.tsx
index 09f146a..89231da 100644
--- a/packages/react/src/MainLayout.tsx
+++ b/packages/react/src/MainLayout.tsx
@@ -88,7 +88,7 @@ function TopNav() {
 
   return (
     <>
-      <nav className="bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
+      <nav className="sticky top-0 z-50 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
         <div
           data-role="wrapper"
           className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"