Next.js Lavalamp Header

Header.module.css

.nav {
  --link-one: 160px;
  --link-two: 160px;
  --link-three: 160px;
  --link-four: 160px;
  --link-five: 160px;

  --menu-width: calc(var(--link-one) + var(--link-two) + var(--link-three) + var(--link-four) + var(--link-five));

  --link-two-left: var(--link-one);
  --link-three-left: calc(var(--link-one) + var(--link-two));
  --link-four-left: calc(var(--link-one) + var(--link-two) + var(--link-three));
  --link-five-left: calc(var(--link-one) + var(--link-two) + var(--link-three) + var(--link-four));

  --highlight-color: blue;

  margin: 27px auto 0;

  position: relative;
  height: 50px;
  width: var(--menu-width);
  background-color: grey;
  border-radius: 8px;
  font-size: 0;
}
.nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}

.nav a:hover ~ .animation {
  background-color: var(--highlight-color);
}
.nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all 0.5s ease 0s;
  border-radius: 8px;
}
.nav a:nth-child(1) {
  width: var(--link-one);
}
.nav a:nth-child(2) {
  width: var(--link-two);
}
.nav a:nth-child(3) {
  width: var(--link-three);
}
.nav a:nth-child(4) {
  width: var(--link-four);
}
.nav a:nth-child(5) {
  width: var(--link-five);
}
.nav .start0,
a:nth-child(1):hover ~ .animation {
  width: var(--link-one);
  left: 0;
}
.nav .start1,
a:nth-child(2):hover ~ .animation {
  width: var(--link-two);
  left: var(--link-two-left);
}
.nav .start2,
a:nth-child(3):hover ~ .animation {
  width: var(--link-three);
  left: var(--link-three-left);
}
.nav .start3,
a:nth-child(4):hover ~ .animation {
  width: var(--link-four);
  left: var(--link-four-left);
}
.nav .start4,
a:nth-child(5):hover ~ .animation {
  width: var(--link-five);
  left: var(--link-five-left);
}

.nav .start0,
.nav .start1,
.nav .start2,
.nav .start3,
.nav .start4 {
  background-color: var(--highlight-color);
}

Header.tsx

import cx from "classnames";
import { useRouter } from "next/router";
import Link from "next/link";

import styles from "./Header.module.css";

const MENU_ITEMS = ["/", "/about", "/blog", "/portfolio", "/contact"];

export const Header = () => {
  const router = useRouter();

  return (
    <nav className={styles.nav}>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/links">Links</Link>
      <Link href="/contact">Contact</Link>
      <div className={cx(styles.animation, styles[`start${MENU_ITEMS.indexOf(router.pathname)}`])}></div>
    </nav>
  );
};