From 6bbeb68b46bf3c1cd023fc3193c3a8d517a6b061 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 19 Oct 2023 21:15:36 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20header=20co?=
 =?UTF-8?q?mponent=20computed=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/[lang]/layout.tsx              |  4 +-
 src/app/[lang]/page.tsx                | 10 +--
 src/app/[lang]/posts/[postId]/page.tsx |  8 ++-
 src/app/[lang]/posts/page.tsx          | 10 +--
 src/components/Header/Header.tsx       | 84 +++++++++++++++++---------
 src/components/Header/Logo.tsx         | 48 ---------------
 6 files changed, 76 insertions(+), 88 deletions(-)
 delete mode 100644 src/components/Header/Logo.tsx

diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
index c002735..27df975 100644
--- a/src/app/[lang]/layout.tsx
+++ b/src/app/[lang]/layout.tsx
@@ -38,7 +38,7 @@ async function I18nLayout({
   params: { lang },
 }: React.PropsWithChildren & RootParams) {
   const { common } = await getDictionary(lang);
-  const logo = {
+  const avatar = {
     src: avatarUrl,
     alt: name,
   };
@@ -55,7 +55,7 @@ async function I18nLayout({
 
   return (
     <>
-      <Header logo={logo} menu={menu} />
+      <Header avatar={avatar} menu={menu} />
       {children}
       <Footer copyright={copyright} />
     </>
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index 2604fb4..910d7b2 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -24,10 +24,12 @@ async function RootPage({ params: { lang } }: RootParams) {
 
   return (
     <Container as="main">
-      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      <div className="py-4">
+        <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      </div>
       <List Item={Card} items={posts} />
     </Container>
   );
diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
index 4a8d362..ce4ee75 100644
--- a/src/app/[lang]/posts/[postId]/page.tsx
+++ b/src/app/[lang]/posts/[postId]/page.tsx
@@ -40,9 +40,11 @@ async function PostPage({ params: { postId } }: PostParams) {
   return (
     <>
       <Container as="main">
-        <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-          {frontmatter.title}
-        </H1>
+        <div className="py-4">
+          <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+            {frontmatter.title}
+          </H1>
+        </div>
         <time className="mt-0">{formattedDate}</time>
         <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
           {content}
diff --git a/src/app/[lang]/posts/page.tsx b/src/app/[lang]/posts/page.tsx
index 4a5f7b2..a23283c 100644
--- a/src/app/[lang]/posts/page.tsx
+++ b/src/app/[lang]/posts/page.tsx
@@ -24,10 +24,12 @@ async function RootPage({ params: { lang } }: RootParams) {
 
   return (
     <Container as="main">
-      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      <div className="py-4">
+        <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      </div>
       <List Item={Card} items={posts} />
     </Container>
   );
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9950f28..1ea5910 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,55 +1,76 @@
 'use client';
 
+import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { usePathname } from 'next/navigation';
-import { CSSProperties, useEffect, useState, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 
 import useScroll from '@/hooks/useScroll';
 import cn from '@/utils/cn';
 import getLocale from '@/utils/getLocale';
 import { clamp } from '@/utils/math';
 
-import ThemeSwitcher from '../ThemeSwitcher';
-import Link from '../Link';
-import Logo, { LogoProps } from './Logo';
 import Container from '../Container';
+import Image from '../Image';
+import Link from '../Link';
+import ThemeSwitcher from '../ThemeSwitcher';
 
 type MenuItem = {
   text: string;
   href: LinkWithoutLocalePathProps['href'];
 };
 
+type Avatar = {
+  src: string | StaticImport;
+  alt: string;
+};
+
 export type HeaderProps = {
-  logo: Omit<LogoProps, 'scrollY' | 'scrollThreshold'>;
+  avatar: Avatar;
   menu: MenuItem[];
+  scrollThreshold?: number;
 };
 
-function Header({ logo, menu }: HeaderProps) {
+function Header({ avatar, menu, scrollThreshold = 100 }: HeaderProps) {
   const pathname = usePathname();
-  const [translateY, setTranslateY] = useState(0);
   const [scroll] = useScroll();
   const headerRef = useRef<HTMLDivElement>(null);
-  const headerHeight = useRef(0);
+  const headerTranslateY = useRef(0);
   const previousScrollY = useRef(0);
   const currentScrollY = Math.floor(scroll.y);
-  const scrollThreshold = 120;
-
-  useEffect(() => {
-    headerHeight.current = headerRef.current?.clientHeight || 0;
-  }, []);
-
-  useEffect(() => {
+  const avatarTranslateY = (
+    clamp(currentScrollY * -1, scrollThreshold * -1) + scrollThreshold
+  ).toFixed(2);
+  const avatarScale = (
+    1.5 -
+    clamp(currentScrollY, scrollThreshold) / (scrollThreshold * 2)
+  ).toFixed(2);
+
+  const calcHeaderTranslateY = () => {
     const scrollY = currentScrollY - scrollThreshold;
 
-    if (scrollY <= 0) return setTranslateY(0);
+    if (scrollY <= 0) return headerTranslateY.current = 0;
 
     const deltaScrollY = previousScrollY.current - scrollY;
+    const headerHeight = headerRef.current?.clientHeight || 0;
+    const newHeaderTranslateY = clamp(
+      headerTranslateY.current + deltaScrollY,
+      headerHeight * -1
+    );
 
     previousScrollY.current = scrollY;
+    headerTranslateY.current = newHeaderTranslateY;
 
-    setTranslateY((pre) =>
-      clamp(pre + deltaScrollY, headerHeight.current * -1)
-    );
-  }, [currentScrollY]);
+    return newHeaderTranslateY;
+  }
+
+  const headerStyles = {
+    '--header-translate-y': `${calcHeaderTranslateY()}px`,
+  } as CSSProperties;
+
+  const avatarStyles = {
+    '--avatar-translate-y': `${avatarTranslateY}px`,
+    '--avatar-scale': avatarScale,
+  } as CSSProperties;
 
   const isActiveLink = (href: LinkWithoutLocalePathProps['href']) => {
     const locale = getLocale(pathname) || '';
@@ -65,14 +86,23 @@ function Header({ logo, menu }: HeaderProps) {
     <Container
       as="header"
       ref={headerRef}
-      className="sticky top-0 z-10 flex translate-y-0 items-center justify-between py-7"
-      style={{ '--tw-translate-y': `${translateY}px` } as CSSProperties}
+      className="sticky top-0 z-10 flex translate-y-[var(--header-translate-y)] items-center justify-between py-7"
+      style={headerStyles}
     >
-      <Logo
-        {...logo}
-        scrollY={currentScrollY}
-        scrollThreshold={scrollThreshold}
-      />
+      <Link
+        href="/"
+        className="origin-bottom-left translate-y-[var(--avatar-translate-y)] scale-[var(--avatar-scale)]"
+        style={avatarStyles}
+      >
+        <Image
+          className="rounded-full shadow-black drop-shadow-xl"
+          width={40}
+          height={40}
+          src={avatar.src}
+          alt={avatar.alt}
+          priority
+        />
+      </Link>
       <nav>
         <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
           {menu.map(({ text, href }) => (
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
deleted file mode 100644
index fc1ae01..0000000
--- a/src/components/Header/Logo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import type { CSSProperties } from 'react';
-import { clamp } from '@/utils/math';
-import Image from '../Image';
-import Link from '../Link';
-
-export type LogoProps = {
-  src: string | StaticImport;
-  alt: string;
-  scrollY: number;
-  scrollThreshold: number;
-};
-
-function Logo({ src, alt, scrollY, scrollThreshold }: LogoProps) {
-  const translateY = (
-    clamp(scrollY * -1, scrollThreshold * -1) + scrollThreshold
-  ).toFixed(2);
-
-  const scale = (
-    1.5 -
-    clamp(scrollY, scrollThreshold) / (scrollThreshold * 2)
-  ).toFixed(2);
-
-  const style = {
-    '--tw-translate-y': `${translateY}px`,
-    '--tw-scale-x': scale,
-    '--tw-scale-y': scale,
-  } as CSSProperties;
-
-  return (
-    <Link
-      href="/"
-      className="origin-bottom-left translate-y-0 scale-100"
-      style={style}
-    >
-      <Image
-        className="rounded-full shadow-black drop-shadow-xl"
-        width={40}
-        height={40}
-        src={src}
-        alt={alt}
-        priority
-      />
-    </Link>
-  );
-}
-
-export default Logo;

From 1ec551dc8e86aad8afe8e338036bbb490f69aba8 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 20 Oct 2023 16:48:57 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84=20update=20scroll=20padding=20?=
 =?UTF-8?q?top?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css
index ebd7bb3..89d6c38 100644
--- a/src/assets/css/globals.css
+++ b/src/assets/css/globals.css
@@ -6,5 +6,5 @@
 @import "./prism-vsc-dark-plus.css";
 
 :root {
-  scroll-padding-top: 72px;
+  scroll-padding-top: 2rem;
 }

From c0669db2231d2a6c55717092b9f3e751f931d0a0 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 20 Oct 2023 16:56:33 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20split=20Menu=20into=20?=
 =?UTF-8?q?separate=20component=20in=20Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.tsx | 82 +++++++++-----------------------
 src/components/Header/Menu.tsx   | 53 +++++++++++++++++++++
 2 files changed, 75 insertions(+), 60 deletions(-)
 create mode 100644 src/components/Header/Menu.tsx

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 1ea5910..f202a94 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,23 +1,16 @@
 'use client';
 
 import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import { usePathname } from 'next/navigation';
-import { CSSProperties, useEffect, useRef } from 'react';
+import { CSSProperties, useRef } from 'react';
 
 import useScroll from '@/hooks/useScroll';
-import cn from '@/utils/cn';
-import getLocale from '@/utils/getLocale';
 import { clamp } from '@/utils/math';
 
 import Container from '../Container';
 import Image from '../Image';
 import Link from '../Link';
 import ThemeSwitcher from '../ThemeSwitcher';
-
-type MenuItem = {
-  text: string;
-  href: LinkWithoutLocalePathProps['href'];
-};
+import Menu, { MenuProps } from './Menu';
 
 type Avatar = {
   src: string | StaticImport;
@@ -26,12 +19,10 @@ type Avatar = {
 
 export type HeaderProps = {
   avatar: Avatar;
-  menu: MenuItem[];
   scrollThreshold?: number;
-};
+} & MenuProps;
 
 function Header({ avatar, menu, scrollThreshold = 100 }: HeaderProps) {
-  const pathname = usePathname();
   const [scroll] = useScroll();
   const headerRef = useRef<HTMLDivElement>(null);
   const headerTranslateY = useRef(0);
@@ -46,53 +37,40 @@ function Header({ avatar, menu, scrollThreshold = 100 }: HeaderProps) {
   ).toFixed(2);
 
   const calcHeaderTranslateY = () => {
-    const scrollY = currentScrollY - scrollThreshold;
-
-    if (scrollY <= 0) return headerTranslateY.current = 0;
-
-    const deltaScrollY = previousScrollY.current - scrollY;
-    const headerHeight = headerRef.current?.clientHeight || 0;
-    const newHeaderTranslateY = clamp(
-      headerTranslateY.current + deltaScrollY,
-      headerHeight * -1
-    );
-
-    previousScrollY.current = scrollY;
-    headerTranslateY.current = newHeaderTranslateY;
-
-    return newHeaderTranslateY;
-  }
+    const scrollPosition = currentScrollY - scrollThreshold;
+
+    if (scrollPosition <= 0) {
+      headerTranslateY.current = 0;
+    } else {
+      const deltaScrollY = previousScrollY.current - scrollPosition;
+      const headerHeight = headerRef.current?.clientHeight || 0;
+
+      previousScrollY.current = scrollPosition;
+      headerTranslateY.current = clamp(
+        headerTranslateY.current + deltaScrollY,
+        headerHeight * -1
+      );
+    }
+
+    return headerTranslateY.current;
+  };
 
   const headerStyles = {
     '--header-translate-y': `${calcHeaderTranslateY()}px`,
-  } as CSSProperties;
-
-  const avatarStyles = {
     '--avatar-translate-y': `${avatarTranslateY}px`,
     '--avatar-scale': avatarScale,
   } as CSSProperties;
 
-  const isActiveLink = (href: LinkWithoutLocalePathProps['href']) => {
-    const locale = getLocale(pathname) || '';
-    const localePrefix = new RegExp(`^/${locale}/?`);
-    const adjustedPathname = pathname.replace(localePrefix, '/');
-
-    if (adjustedPathname === '/') return href === '/';
-
-    return adjustedPathname.startsWith(href) && href !== '/';
-  };
-
   return (
     <Container
       as="header"
       ref={headerRef}
-      className="sticky top-0 z-10 flex translate-y-[var(--header-translate-y)] items-center justify-between py-7"
+      className="sticky top-0 z-10 flex translate-y-[var(--header-translate-y)] items-center justify-between py-7 will-change-transform"
       style={headerStyles}
     >
       <Link
         href="/"
         className="origin-bottom-left translate-y-[var(--avatar-translate-y)] scale-[var(--avatar-scale)]"
-        style={avatarStyles}
       >
         <Image
           className="rounded-full shadow-black drop-shadow-xl"
@@ -103,23 +81,7 @@ function Header({ avatar, menu, scrollThreshold = 100 }: HeaderProps) {
           priority
         />
       </Link>
-      <nav>
-        <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
-          {menu.map(({ text, href }) => (
-            <li key={text}>
-              <Link
-                href={href}
-                className={cn(
-                  'block p-3 text-xl leading-none text-white/90 no-underline hover:text-white',
-                  isActiveLink(href) && 'text-blue-500 hover:text-blue-500'
-                )}
-              >
-                {text}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
+      <Menu menu={menu} />
       <ThemeSwitcher className="rounded-full bg-gray-900/60 p-3 backdrop-blur-md" />
     </Container>
   );
diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx
new file mode 100644
index 0000000..cd518d7
--- /dev/null
+++ b/src/components/Header/Menu.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import cn from '@/utils/cn';
+import getLocale from '@/utils/getLocale';
+
+import Link from '../Link';
+
+type MenuItem = {
+  text: string;
+  href: LinkWithoutLocalePathProps['href'];
+};
+
+export type MenuProps = {
+  menu: MenuItem[];
+};
+
+function Menu({ menu }: MenuProps) {
+  const pathname = usePathname();
+
+  const isActiveLink = (href: LinkWithoutLocalePathProps['href']) => {
+    const locale = getLocale(pathname) || '';
+    const localePrefix = new RegExp(`^/${locale}/?`);
+    const adjustedPathname = pathname.replace(localePrefix, '/');
+
+    if (adjustedPathname === '/') return href === '/';
+
+    return adjustedPathname.startsWith(href) && href !== '/';
+  };
+
+  return (
+      <nav>
+        <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
+          {menu.map(({ text, href }) => (
+            <li key={text}>
+              <Link
+                href={href}
+                className={cn(
+                  'block p-3 text-xl leading-none text-white/90 no-underline hover:text-white',
+                  isActiveLink(href) && 'text-blue-500 hover:text-blue-500'
+                )}
+              >
+                {text}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+  );
+}
+
+export default Menu;

From 3fe9c248555c6ad5a18fb7b8a9b6f95f188d1a19 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 20 Oct 2023 16:57:22 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=85=20update=20unit=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/header.test.tsx | 113 ++++++++++++--------------
 src/components/Header/menu.test.tsx   |  64 +++++++++++++++
 2 files changed, 116 insertions(+), 61 deletions(-)
 create mode 100644 src/components/Header/menu.test.tsx

diff --git a/src/components/Header/header.test.tsx b/src/components/Header/header.test.tsx
index f225d7b..9046a67 100644
--- a/src/components/Header/header.test.tsx
+++ b/src/components/Header/header.test.tsx
@@ -1,58 +1,32 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
-import Header, { HeaderProps } from '.';
-
-const mockPathname = jest.fn();
-
-jest.mock('next/navigation', () => ({
-  usePathname: () => mockPathname(),
-}));
+import Header from '.';
 
 describe('Header component', () => {
-  const logo = {
+  const avatar = {
     src: 'https://external.com/test.jpg',
-    alt: 'test logo image alt',
+    alt: 'test avatar image alt',
   };
-  const menu: HeaderProps['menu'] = [
-    { text: 'Home', href: '/' },
-    { text: 'Post', href: '/posts' },
-  ];
-
-  beforeEach(() => {
-    mockPathname.mockClear();
-  });
 
   it('should render correct element', () => {
-    mockPathname.mockReturnValueOnce('/');
-
-    render(<Header logo={logo} menu={menu} />);
+    render(<Header avatar={avatar} menu={[]} />);
 
     const nav = screen.getByRole('navigation');
-    const brandLink = screen.getByRole('img', { name: logo.alt });
-    const linkA = screen.getByRole('link', { name: menu[0].text });
-    const linkB = screen.getByRole('link', { name: menu[1].text });
+    const brandLink = screen.getByRole('img', { name: avatar.alt });
 
     expect(nav).toBeInTheDocument();
     expect(nav.tagName).toBe('NAV');
 
     expect(brandLink).toBeInTheDocument();
     expect(brandLink.parentElement).toHaveAttribute('href', '/');
-
-    expect(linkA).toHaveTextContent(menu[0].text);
-    expect(linkA).toHaveAttribute('href', menu[0].href);
-
-    expect(linkB).toHaveTextContent(menu[1].text);
-    expect(linkB).toHaveAttribute('href', menu[1].href);
   });
 
   it('should hide header on scroll down and show on scroll up', async () => {
-    mockPathname.mockReturnValueOnce('/');
-
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
       configurable: true,
       value: 50,
     });
 
-    render(<Header logo={logo} menu={[]} />);
+    render(<Header avatar={avatar} menu={[]} scrollThreshold={120} />);
 
     const header = screen.getByRole('banner');
 
@@ -64,7 +38,9 @@ describe('Header component', () => {
     });
 
     await waitFor(() => {
-      expect(header).toHaveStyle({ '--tw-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--header-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '100.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.42' });
     });
 
     act(() => {
@@ -73,7 +49,9 @@ describe('Header component', () => {
     });
 
     await waitFor(() => {
-      expect(header).toHaveStyle({ '--tw-translate-y': '-50px' });
+      expect(header).toHaveStyle({ '--header-translate-y': '-50px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '0.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.00' });
     });
 
     act(() => {
@@ -82,7 +60,9 @@ describe('Header component', () => {
     });
 
     await waitFor(() => {
-      expect(header).toHaveStyle({ '--tw-translate-y': '-20px' });
+      expect(header).toHaveStyle({ '--header-translate-y': '-20px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '0.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.00' });
     });
 
     act(() => {
@@ -91,33 +71,44 @@ describe('Header component', () => {
     });
 
     await waitFor(() => {
-      expect(header).toHaveStyle({ '--tw-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--header-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '40.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.17' });
+    });
+
+    act(() => {
+      window.scrollY = 0;
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    await waitFor(() => {
+      expect(header).toHaveStyle({ '--header-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '120.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.50' });
     });
   });
 
-  it.each([
-    ['/', menu[0].text],
-    ['/posts', menu[1].text],
-    ['/en', menu[0].text],
-    ['/en/posts', menu[1].text],
-    ['/en/posts/test', menu[1].text],
-  ])(
-    'should render correct active link based on the pathname "%s"',
-    (pathname, activeLinkText) => {
-      mockPathname.mockReturnValueOnce(pathname);
-
-      render(<Header logo={logo} menu={menu} />);
-
-      const links = screen.getAllByRole('link');
-      const activeClassName = 'text-blue-500 hover:text-blue-500';
-
-      links.forEach((link) => {
-        if (link.textContent === activeLinkText) {
-          expect(link).toHaveClass(activeClassName);
-        } else {
-          expect(link).not.toHaveClass(activeClassName);
-        }
-      });
-    }
-  );
+  it('should calculate the correct styles even when `clientHeight` is `undefined`', async () => {
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+      configurable: true,
+      value: undefined,
+    });
+
+    render(<Header avatar={avatar} menu={[]} scrollThreshold={120} />);
+
+    const header = screen.getByRole('banner');
+
+    expect(header.tagName).toBe('HEADER');
+
+    act(() => {
+      window.scrollY = 200;
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    await waitFor(() => {
+      expect(header).toHaveStyle({ '--header-translate-y': '0px' });
+      expect(header).toHaveStyle({ '--avatar-translate-y': '0.00px' });
+      expect(header).toHaveStyle({ '--avatar-scale': '1.00' });
+    });
+  });
 });
diff --git a/src/components/Header/menu.test.tsx b/src/components/Header/menu.test.tsx
new file mode 100644
index 0000000..a8c8466
--- /dev/null
+++ b/src/components/Header/menu.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import Menu, { MenuProps } from './Menu';
+
+const mockPathname = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => mockPathname(),
+}));
+
+describe('Menu component', () => {
+  const menu: MenuProps['menu'] = [
+    { text: 'Home', href: '/' },
+    { text: 'Post', href: '/posts' },
+  ];
+
+  beforeEach(() => {
+    mockPathname.mockClear();
+  });
+
+  it('should render correct element', () => {
+    mockPathname.mockReturnValueOnce('/');
+
+    render(<Menu menu={menu} />);
+
+    const nav = screen.getByRole('navigation');
+    const linkA = screen.getByRole('link', { name: menu[0].text });
+    const linkB = screen.getByRole('link', { name: menu[1].text });
+
+    expect(nav).toBeInTheDocument();
+    expect(nav.tagName).toBe('NAV');
+
+    expect(linkA).toHaveTextContent(menu[0].text);
+    expect(linkA).toHaveAttribute('href', menu[0].href);
+
+    expect(linkB).toHaveTextContent(menu[1].text);
+    expect(linkB).toHaveAttribute('href', menu[1].href);
+  });
+
+  it.each([
+    ['/', menu[0].text],
+    ['/posts', menu[1].text],
+    ['/en', menu[0].text],
+    ['/en/posts', menu[1].text],
+    ['/en/posts/test', menu[1].text],
+  ])(
+    'should render correct active link based on the pathname "%s"',
+    (pathname, activeLinkText) => {
+      mockPathname.mockReturnValueOnce(pathname);
+
+      render(<Menu menu={menu} />);
+
+      const links = screen.getAllByRole('link');
+      const activeClassName = 'text-blue-500 hover:text-blue-500';
+
+      links.forEach((link) => {
+        if (link.textContent === activeLinkText) {
+          expect(link).toHaveClass(activeClassName);
+        } else {
+          expect(link).not.toHaveClass(activeClassName);
+        }
+      });
+    }
+  );
+});