From a362989485e06b01a83f05724fc2ae39fc8b5b81 Mon Sep 17 00:00:00 2001
From: Alam Guardin <alamguardin@gmail.com>
Date: Wed, 7 Aug 2024 19:46:54 -0500
Subject: feat: show and hide content shadow

---
 src/components/List.astro   |  2 +-
 src/components/Shadow.astro |  5 +++--
 src/pages/index.astro       | 34 +++++++++++++++++++++++++++++++++-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/List.astro b/src/components/List.astro
index d260e17..80af910 100644
--- a/src/components/List.astro
+++ b/src/components/List.astro
@@ -2,7 +2,7 @@
 import Link from "./Link.astro";
 ---
 
-<div class="list">
+<div class="list" id="list">
     <Link></Link>
     <Link></Link>
     <Link></Link>
diff --git a/src/components/Shadow.astro b/src/components/Shadow.astro
index 44344f6..ab799d1 100644
--- a/src/components/Shadow.astro
+++ b/src/components/Shadow.astro
@@ -1,5 +1,5 @@
-<div class="shadow">
-    <button class="shadow-button">
+<div class="shadow" id="shadow">
+    <button class="shadow-button" id="shadow-button">
         <span class="shadow-button-text">Explore More</span>
         <span class="shadow-button-icon">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM12.1779 7.17624C11.4834 7.48982 11 8.18846 11 9C11 10.1046 11.8954 11 13 11C13.8115 11 14.5102 10.5166 14.8238 9.82212C14.9383 10.1945 15 10.59 15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C11.41 7 11.8055 7.06167 12.1779 7.17624Z"></path></svg>
@@ -9,6 +9,7 @@
 
 <style>
     .shadow {
+        margin-top: 3rem;
         position: absolute;
         left: 0;
         bottom: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 088597a..79d81df 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,7 @@ import Shadow from '../components/Shadow.astro'
 ---
 
 <Layout title="Welcome to Astro.">
-    <main class="container">
+    <main class="container" id="container">
         <Profile></Profile>
         <List></List>
         <Shadow></Shadow>
@@ -23,3 +23,35 @@ import Shadow from '../components/Shadow.astro'
         overflow: hidden;
     }
 </style>
+
+<script>
+    (() => {
+        // show or hide shadow, works only if content leaves viewport
+        const mainContent = document.getElementById('container');
+        const shadow = document.getElementById('shadow');
+        const shadowButton = document.getElementById('shadow-button');
+
+        shadowButton.addEventListener('click', () => {
+            if (shadow.style.position === 'absolute') {
+                shadow.style.position = 'relative';
+                mainContent.style.overflow = 'auto';
+                shadowButton.children[0].textContent = 'Show Less';
+            
+            }  else {
+                shadow.style.position = 'absolute';
+                mainContent.style.overflow = 'hidden';
+                mainContent.scroll(0,0);
+                shadowButton.children[0].textContent = 'Explore More';
+            }
+        });
+
+        // Hide the shadow if the content is minimal enough to leave the viewport
+        const list = document.getElementById('list');
+        const observerList = list.getBoundingClientRect();
+
+        if (observerList.bottom <  window.innerHeight) {
+            shadow.style.display = 'none';
+            mainContent.style.overflow = 'auto';
+        }
+    })();
+</script>
\ No newline at end of file
-- 
cgit v1.2.3