website/components/Navbar.tsx

import styles from '@/styles/Navbar.module.scss';

import Link from 'next/link';

import {
  Menu,
  Mountain,
  X
} from 'lucide-react';

import {
  useEffect,
  useRef,
  useState
} from 'react';

type Props = {
  currentPage: string;
}

export default function Navbar({ currentPage }: Props) {
  const [ navOpen, setNavOpen ]   = useState(false);
  const [ scrolled, setScrolled ] = useState(false);

  const toggleNav = () => {
    setNavOpen(!navOpen);
  };

  useEffect(() => {
    if (navOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
  }, [ navOpen ]);

  useEffect(() => {
    if(window.scrollY <= 10)
      setScrolled(false);
    else
      setScrolled(true);

    document.addEventListener('scroll', () => {
      if(window.scrollY <= 10)
        setScrolled(false);
      else
        setScrolled(true);

      console.log(window.scrollY);
    });
  }, [ ]);

  return (
    <nav className={styles.navBar} data-open={navOpen} data-scrolled={scrolled}>
      <div className={styles.container}>
        <div className={styles.navMain}>
          <Mountain />

          <button onClick={toggleNav}>
            {!navOpen ? <Menu /> : <X />}
          </button>
        </div>

        <div className={styles.navCollapse}>
          <ul className={styles.navLinks}>
            <li>
              <Link href="/" className={currentPage === 'home' ? styles.active : ''}>Home</Link>
            </li>
            <li>
              <Link href="/docs" className={currentPage === 'docs' ? styles.active : ''}>Documentation</Link>
            </li>
            <li>
              <Link href="/servers" className={currentPage === 'servers' ? styles.active : ''}>Servers</Link>
            </li>
            <li>
              <Link href="/blog" className={currentPage === 'blog' ? styles.active : ''}>Blog</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}