style: show the shadow only when scrolling (#162)

hbstack · Aug 4, 2023 · b87bc7d · b87bc7d
1 parent 781fca1
commit b87bc7d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/assets/hb/modules/header/js/index.ts b/assets/hb/modules/header/js/index.ts
@@ -4,10 +4,18 @@ import "js/bootstrap/src/offcanvas";
 (() => {
     document.addEventListener('DOMContentLoaded', () => {
         const header = document.querySelector('.hb-header') as HTMLElement
-        if (!header || window.innerWidth >= 576) {
+        if (!header) {
             return;
         }
 
+        const shadow = () => {
+            header.classList.add('shadow-sm')
+        }
+
+        const removeShadow = () => {
+            header.classList.contains('shadow-sm') && header.classList.remove('shadow-sm')
+        }
+
         const show = () => {
             header.style.removeProperty('opacity');
             header.style.removeProperty('z-index');
@@ -21,7 +29,12 @@ import "js/bootstrap/src/offcanvas";
         let h = 0;
         const threshold = 20;
         window.addEventListener('scroll', () => {
-            if (Math.abs(document.documentElement.scrollTop - h) > threshold) {
+            if (document.documentElement.scrollTop === 0) {
+                removeShadow()
+            } else {
+                shadow()
+            }
+            if (window.innerWidth < 576 && Math.abs(document.documentElement.scrollTop - h) > threshold) {
                 document.documentElement.scrollTop > h ? hide() : show();
                 h = document.documentElement.scrollTop;
             }

diff --git a/assets/hb/modules/header/purgecss.config.toml b/assets/hb/modules/header/purgecss.config.toml
@@ -1,3 +1,4 @@
 classes = [
     "offcanvas-backdrop", # Required by Offcanvas.
+    "shadow-sm",
 ]
diff --git a/assets/hb/modules/header/scss/_header.scss b/assets/hb/modules/header/scss/_header.scss
@@ -20,7 +20,7 @@ $hb-header-margin-bottom: 2rem;
 
 .hb-header {
     margin-bottom: $hb-header-margin-bottom;
-    transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in, box-shadow 1s;
 
     @if $hb-header-sticky {
         @extend .sticky-top;

diff --git a/layouts/partials/hb/modules/header/index.html b/layouts/partials/hb/modules/header/index.html
@@ -1,5 +1,5 @@
 {{- $params := $.Site.Params.hb.header }}
-<header class="hb-header shadow-sm">
+<header class="hb-header">
   <nav class="hb-header-nav navbar navbar-expand-xxl">
     <div
       class="{{ cond $params.full_width `container-fluid` `container-xxl` }}">