Sticky Navigation

Demo

Code

import { useTheme } from 'next-themes';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { FiSun, FiMoon } from 'react-icons/fi';
import { useRouter } from 'next/router';

const links = [
  { href: '/', label: 'Home' },
  { href: '/blog', label: 'Blog' },
  { href: '/projects', label: 'Projects' },
  { href: '/about', label: 'About' },
];

export default function Nav() {
  const [onTop, setOnTop] = useState(true);
  // sets class dark to html
  const { theme, setTheme } = useTheme();
  const { route } = useRouter();

  const handleScroll = () => {
    if (onTop !== (window.pageYOffset === 0)) {
      setOnTop(window.pageYOffset === 0);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  });

  return (
    <header
      className={`${
        onTop ? '' : 'shadow-sm'
      } transition-shadow sticky top-0 z-10`}
    >
      <div className='from-accent-100 to-accent-300 via-accent-200 h-2 bg-gradient-to-tr'></div>
      <nav className='bg-white transition-colors dark:bg-dark'>
        <ul className='flex justify-between items-center p-4 px-4 mx-auto max-w-4xl'>
          <ul className='flex justify-between items-center space-x-4'>
            {links.map(({ href, label }) => (
              <li key={`${href}${label}`}>
                <Link href={href}>
                  <a
                    className={`${
                      route === href || route === href + '/[slug]'
                        ? 'text-transparent'
                        : 'text-black dark:text-white'
                    } font-medium  hover:text-accent-200 dark:hover:text-accent-200`}
                  >
                    <span
                      className={`${
                        (route === href || route === href + '/[slug]') &&
                        'accent'
                      }`}
                    >
                      {label}
                    </span>
                  </a>
                </Link>
              </li>
            ))}
          </ul>
          <button
            className='border-thin p-2.5 rounded-md dark:hover:border-accent-200 dark:hover:text-accent-200 hover:border-accent-200 hover:text-accent-200 focus:outline-none'
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          >
            {theme === 'light' ? <FiMoon size={20} /> : <FiSun size={20} />}
          </button>
        </ul>
      </nav>
    </header>
  );
}
jsx