From ac93858d82fcbf26d16c8e917c994ec8ea4b5a64 Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Thu, 26 May 2022 13:01:09 +0200
Subject: [PATCH] [components/toc][f]: intersection observer adjsmnt

---
 site/components/Layout.js                   |  2 +-
 site/components/MDX.js                      |  3 +--
 site/components/_getIntersectionObserver.js | 14 ++++++++++----
 site/styles/global.css                      |  7 ++++---
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/site/components/Layout.js b/site/components/Layout.js
index 68af9fa..ba79bb1 100644
--- a/site/components/Layout.js
+++ b/site/components/Layout.js
@@ -17,7 +17,7 @@ export default function Layout({ children }) {
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
       </Head>
       <Nav />
-      <main className="max-w-7xl relative mx-auto px-2 sm:px-6 md:px-8">
+      <main className="border-2 border-blue-500 max-w-7xl relative mx-auto px-2 sm:px-6 md:px-8">
         {/* <div className="hidden md:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500"> */}
         {/*   <Sidebar /> */}
         {/* </div> */}
diff --git a/site/components/MDX.js b/site/components/MDX.js
index 16d00c3..265e5a4 100644
--- a/site/components/MDX.js
+++ b/site/components/MDX.js
@@ -120,8 +120,7 @@ export default function MdxPage({ children }) {
           { name: "keywords", content: keywords ? keywords : "" },
         ]}
       />
-      {/*<article className="px-8 md:pl-[14rem] lg:pr-[1rem] prose max-w-none dark:prose-invert prose-a:break-all mx-auto border-2 border-yellow-500">*/}
-      <article className="px-12 lg:pr-[22rem] prose max-w-none dark:prose-invert prose-a:break-all mx-auto">
+      <article className="border-2 border-green-500 prose dark:prose-invert prose-a:break-all mx-auto lg:mr-[20rem] p-6">
         <header>
           <div className="mb-6">
             {title && <h1 className="mb-0">{title}</h1>}
diff --git a/site/components/_getIntersectionObserver.js b/site/components/_getIntersectionObserver.js
index 51585b7..edbadd4 100644
--- a/site/components/_getIntersectionObserver.js
+++ b/site/components/_getIntersectionObserver.js
@@ -2,12 +2,18 @@ const getIntersectionObserver = (callback) => {
   if (typeof window !== 'undefined') {
     return new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          callback(entry);
-        });
+        const intersectingEntries = entries.filter((e) => e.isIntersecting);
+        const firstEntry = intersectingEntries[0];
+        if (firstEntry) {
+          callback(firstEntry);
+        }
+        // entries.forEach((entry) => {
+        //   callback(entry);
+        // });
       },
       { root: null,
-        rootMargin: `0% 0% -85% 0%`
+        threshold: 0.9,
+        rootMargin: `0% 0% -90% 0%`
       }
     );
   }
diff --git a/site/styles/global.css b/site/styles/global.css
index e6e1c74..929940b 100644
--- a/site/styles/global.css
+++ b/site/styles/global.css
@@ -44,15 +44,16 @@ body {
   @apply
     hidden
     lg:block
-    w-[22rem]
-    p-12 /* 1.5rem */
-    pl-12
+    w-[20rem]
+    px-8
     py-24
     fixed
     top-16
     /* bottom-0 */
     right-[max(2rem,calc(50%-40rem+2rem))]
     overflow-y-auto
+    border-2
+    border-red-500
 }
 
 .toc::before {