From b87bc7dadc57ca1c8c49451f17d47dedfbde583f Mon Sep 17 00:00:00 2001
From: Razon Yang <razonyang@gmail.com>
Date: Fri, 4 Aug 2023 17:29:40 +0800
Subject: [PATCH] style: show the shadow only when scrolling (#162)

---
 assets/hb/modules/header/js/index.ts          | 17 +++++++++++++++--
 assets/hb/modules/header/purgecss.config.toml |  1 +
 assets/hb/modules/header/scss/_header.scss    |  2 +-
 layouts/partials/hb/modules/header/index.html |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/hb/modules/header/js/index.ts b/assets/hb/modules/header/js/index.ts
index 32bad0bc..05a72864 100644
--- 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
index 2ba19fbf..349e5efb 100644
--- 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
index bd40d1a8..aee429a0 100644
--- 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
index fdb340a4..1898f92d 100644
--- 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` }}">