feat: show and hide content shadow

1 files changed, 33 insertions, 1 deletions

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