feat: hides/shows header on scroll

components/layout/__tests__/global-header.test.tsx

@@ -1,15 +1,24 @@
 import { render } from "@testing-library/react";
+import { throttle } from "@martinstark/throttle-ts";
 import { GlobalHeader } from "../global-header";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
 describe("GlobalHeader", () => {
+  test("should run throttle function 1 time", () => {
+    const func = jest.fn();
+    const [throttleFunc] = throttle(func, 200);
+
+    throttleFunc();
+    expect(func).toHaveBeenCalledTimes(1);
+  });
+
   it("renders correctly", () => {
     const { container } = render(<GlobalHeader />);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       <header
-        class="flex items-center justify-center fixed w-full h-16 z-40 bg-brand-500 shadow-md"
+        class="flex items-center justify-center fixed w-full h-16 z-40 bg-brand-500 shadow-md transition duration-200"
       >
         <div
           class="w-full sm:max-w-xl mx-auto flex items-center justify-between h-full px-4"
@@ -66,7 +75,7 @@ describe("GlobalHeader", () => {
           >
             <button
               aria-expanded="false"
-              class="flex items-center justify-center rounded-md h-10 w-10 ml-4 hover:bg-gray-100 hover:bg-opacity-10 focus:bg-gray-100 focus:bg-opacity-10"
+              class="flex items-center justify-center rounded-md h-10 w-10 ml-4 hover:bg-gray-100 hover:bg-opacity-10 focus:bg-gray-100 focus:bg-opacity-10 focus:outline-none appearance-none"
               id="headlessui-popover-button-1"
               type="button"
             >

components/layout/global-header.tsx

@@ -1,16 +1,58 @@
-import { createElement, useRef } from "react";
+import { createElement, useRef, useState, useEffect } from "react";
 
 import { Popover } from "@headlessui/react";
 import Link from "next/link";
+import clsx from "clsx";
+import { throttle } from "@martinstark/throttle-ts";
 import { Container } from "../ui/container";
 import { NavigationMenuPopover, navMenuButtonIcon } from "./navigation-menu";
 import { WBWLogoWhite } from "~/components/ui/wbw-logo";
 
+const MINIMUM_SCROLL = 200; // 64 height header
+const TIMEOUT_DELAY = 150;
+
 export function GlobalHeader() {
   const popoverButtonRef = useRef<HTMLButtonElement>(null);
 
+  const [shouldHideHeader, setShouldHideHeader] = useState(false);
+  const [, setScrollPosition] = useState(0);
+  let previousScrollTop = 0;
+
+  function handleDocumentScroll() {
+    const { scrollTop: currentScrollTop } = document.documentElement;
+    const isScrolledDown = previousScrollTop < currentScrollTop;
+    const isMinimumScrolled = currentScrollTop > MINIMUM_SCROLL;
+
+    setScrollPosition((previousPosition) => {
+      previousScrollTop = previousPosition;
+      return currentScrollTop;
+    });
+
+    setTimeout(() => {
+      setShouldHideHeader(isScrolledDown && isMinimumScrolled);
+    }, TIMEOUT_DELAY);
+  }
+
+  const [handleDocumentScrollThrottled] = throttle(handleDocumentScroll, 200);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleDocumentScrollThrottled);
+
+    return () =>
+      window.removeEventListener("scroll", handleDocumentScrollThrottled);
+  }, []);
+
+  const hiddenStyle = shouldHideHeader
+    ? "-translate-y-full overflow-y-hidden"
+    : "";
+
   return (
-    <header className="flex items-center justify-center fixed w-full h-16 z-40 bg-brand-500 shadow-md">
+    <header
+      className={clsx(
+        "flex items-center justify-center fixed w-full h-16 z-40 bg-brand-500 shadow-md transition duration-200",
+        hiddenStyle,
+      )}
+    >
       <Container className="flex items-center justify-between h-full px-4">
         <Link href="/">
           <a className="align-middle">
@@ -22,7 +64,7 @@ export function GlobalHeader() {
           {({ open }) => (
             <>
               <Popover.Button
-                className="flex items-center justify-center rounded-md h-10 w-10 ml-4 hover:bg-gray-100 hover:bg-opacity-10 focus:bg-gray-100 focus:bg-opacity-10"
+                className="flex items-center justify-center rounded-md h-10 w-10 ml-4 hover:bg-gray-100 hover:bg-opacity-10 focus:bg-gray-100 focus:bg-opacity-10 focus:outline-none appearance-none"
                 ref={popoverButtonRef}
               >
                 {createElement(navMenuButtonIcon(open), {

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@headlessui/react": "^1.3.0",
     "@heroicons/react": "1.0.2",
+    "@martinstark/throttle-ts": "^1.2.3",
     "@netlify/plugin-nextjs": "3.7.1",
     "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/typography": "0.4.1",
@@ -81,7 +82,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "frontmatter-markdown-loader": "3.6.3",
-    "husky": "7.0.1",
+    "husky": "^7.0.1",
     "identity-obj-proxy": "3.0.0",
     "is-ci-cli": "2.2.0",
     "jest": "27.0.6",