From 2a5ca0d6e771067e64ba854036c584c98541dac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Henrik=20Gr=C3=B8nsleth?= <hh.gronsleth@gmail.com>
Date: Mon, 25 Nov 2024 23:02:39 +0100
Subject: [PATCH] Fix links on desktop

---
 src/pages/historikk.astro | 35 ++++++++++++++++++++++++++++-------
 src/styles/main.css       | 16 ++++++++++++++++
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/pages/historikk.astro b/src/pages/historikk.astro
index 5f4128f..ee51e68 100644
--- a/src/pages/historikk.astro
+++ b/src/pages/historikk.astro
@@ -28,10 +28,10 @@ const years = [
       <h1 class="text-5xl md:text-7xl">Historikk</h1>
       <p>Tidligere artister på mandaljazz.</p>
       <div
-        class="sticky top-[52px] z-10 -mx-4 md:top-[56px] md:col-span-2 md:mx-0 lg:col-span-2"
+        class="sticky top-[48px] z-10 -mx-4 md:col-span-2 lg:top-[56px] lg:col-span-2"
       >
         <ul
-          class="sticky top-[52px] flex flex-row items-center gap-4 overflow-x-auto bg-beige px-4 py-3 md:top-[56px] md:flex-col md:items-start md:px-0"
+          class="scrollbar-hidden flex flex-row items-center gap-4 overflow-x-auto bg-beige px-4 py-3"
         >
           {
             years.map((year) => (
@@ -355,8 +355,29 @@ const years = [
   </main>
 </Layout>
 
-<script
-  is:inline
-  async
-  src="//embedr.flickr.com/assets/client-code.js"
-  charset="utf-8"></script>
+<script>
+  // list of elements to be observed
+  const targets = document.getElementsByClassName("observed");
+
+  const options = {
+    root: null, // null means root is viewport
+    rootMargin: "0px",
+    threshold: 0.5, // trigger callback when 50% of the element is visible
+  };
+
+  function callback(entries, observer) {
+    console.log({ document, entries, observer });
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        document.querySelector(".active")?.classList?.remove("active");
+        const targetId = entry.target.id; // identify which element is visible in the viewport at 50%
+        console.log({ targetId });
+        document.querySelector(`[href="#${targetId}"]`).classList.add("active");
+      }
+    });
+  }
+
+  let observer = new IntersectionObserver(callback, options);
+
+  [...targets].forEach((target) => observer.observe(target));
+</script>
diff --git a/src/styles/main.css b/src/styles/main.css
index 5a36c3f..2dc1ef1 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hidden {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+}
+
 body {
   letter-spacing: 0.05em;
   hyphenate-character: "-";
@@ -44,6 +56,10 @@ h6 {
   background-position: 0 22%;
   color: theme("colors.white");
 }
+.link.active {
+  background-position: 0 22%;
+  color: theme("colors.white");
+}
 
 .bg-grainy-dark-blue-gradient {
   background: linear-gradient(