From 230f95d6ea377d4ea82b024d4d198c46e23bead6 Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Thu, 12 Dec 2024 16:35:08 +0100
Subject: [PATCH] Extended intersection observer to also hide the fixed share
 buttons when the user has scrolled past the share buttons.

This is because we don't want to show the fixed share buttons in the footer
---
 src/components/button-share/button-share.tsx | 26 ++++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/button-share/button-share.tsx b/src/components/button-share/button-share.tsx
index 9965d4c7f..83b0aa1d9 100644
--- a/src/components/button-share/button-share.tsx
+++ b/src/components/button-share/button-share.tsx
@@ -24,31 +24,31 @@ const ButtonShare: React.FC<ButtonShareProps> = ({ className }) => {
     navigator.clipboard.writeText(href);
   };
 
+  // Hide fixed buttons when share button is in view or above viewport
   useEffect(() => {
+    const shareButton = shareButtonRef.current;
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setShowFixedButtons(false);
-          } else {
-            setShowFixedButtons(true);
-          }
+        const isIntersecting = entries.some((entry) => entry.isIntersecting);
+        const isAboveViewport = entries.some((entry) => {
+          // return true if the share button is above the viewport
+          return entry.boundingClientRect.top < 0;
         });
+        setShowFixedButtons(!isIntersecting && !isAboveViewport);
       },
       { threshold: 1 }
     );
 
-    const shareButton = shareButtonRef.current;
-
     if (shareButton) {
       observer.observe(shareButton);
+
+      return () => {
+        // Clean up observer on unmount
+        observer.disconnect();
+      };
     }
 
-    return () => {
-      if (shareButton) {
-        observer.unobserve(shareButton);
-      }
-    };
+    return () => {};
   }, []);
 
   return (