feat: hides/shows header on scroll

[bungandy]

Hides/shows header on scrolling a page

Why?

"When implemented wrong, sticky navigation elements can serve as a distraction from the actual content.” – Aaron Andre Chichioco

Objective

If user is scrolling down, header area turn into invisible format to increase the area, so user can have more 'room' or reducing distraction elements. And when user is scrolling up, the header / burger menu become visible.

I know the header area quite small as it has 64px height, but fixed header has the downside of taking up a significant portion of the smaller mobile screen. The same pattern can be also seen in mobile safari or any browser app.

Purpose

Before	After
https://user-images.githubusercontent.com/290786/128641828-c515bf4f-e9d7-4200-8943-f8d0a09544d6.mov	https://user-images.githubusercontent.com/290786/128641748-f473e5e7-f9a9-4fd3-a091-df38f4566acb.mov

---

Current Tasks

• [x] install dep using yarn
• [x] check unused state lib/scroll-throttled.tsx
• [x] add tests global-header.tsx
• [x] tests lib/scroll-throttled.tsx (deleted)

[netlify[bot]]

✔️ Deploy Preview for wargabantuwarga ready!

🔨 Explore the source changes: 61b7899567d619d31071f3ce5bdcf4cef0505287

🔍 Inspect the deploy log: https://app.netlify.com/sites/wargabantuwarga/deploys/61140c2b999f1f0007696cf9

😎 Browse the preview: https://deploy-preview-592--wargabantuwarga.netlify.app

[codecov[bot]]

Codecov Report

Merging #592 (61b7899) into main (14b92a9) will decrease coverage by 0.03%. The diff coverage is 76.00%.

@@            Coverage Diff             @@
##             main     #592      +/-   ##
==========================================
- Coverage   80.48%   80.44%   -0.04%     
==========================================
  Files         115      119       +4     
  Lines        1291     1355      +64     
  Branches      420      444      +24     
==========================================
+ Hits         1039     1090      +51     
- Misses        246      257      +11     
- Partials        6        8       +2     

Impacted Files	Coverage Δ
components/home/homepage-emergency-cta.tsx	100.00% <ø> (ø)
components/home/homepage-welcome/dialog.tsx	100.00% <ø> (ø)
components/kontak-darurat/chatbot-section.tsx	100.00% <ø> (ø)
...nents/kontak-darurat/emergency-contact-section.tsx	100.00% <ø> (ø)
components/layout/page/page-content.tsx	100.00% <ø> (ø)
components/layout/page/page-header.tsx	60.00% <0.00%> (ø)
components/ui/alert/alert.tsx	100.00% <ø> (ø)
components/ui/alert/utils/helpers.ts	100.00% <ø> (ø)
pages/404.tsx	100.00% <ø> (+100.00%)	:arrow_up:
pages/_error.tsx	100.00% <ø> (+100.00%)	:arrow_up:
... and 28 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 14b92a9...61b7899. Read the comment docs.