feat: show and hide content shadow

alamguardin · Aug 8, 2024 · a362989 · a362989
1 parent 698d5e7
commit a362989
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>