Header.tsx

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Image from 'next/image';

import type { SitemapItem } from '@/helpers/types';

import sitemap from '@/data/sitemap.json';

import { Social } from '@/components';

const breakpointMobileMenu = 800;

interface SubmenuItemProps {
  active: boolean,
  data: {
    parent: string,
    items: Array<{
      title: string,
      path: SitemapItem['path'] | string,
      mobile?: boolean,
      external?: boolean,
    }>,
  },
}

const SubmenuItem = ({ active, data }: SubmenuItemProps) => (
  <ul className={`submenu ${active ? 'active' : ''}`}>
    <li className="header mobile">{data.parent}</li>
    {data.items.map(({
      title,
      path,
      mobile = false,
      external = false,
    }) => (
      <li key={path} className={mobile ? 'mobile' : ''}>
        <Link
          href={path}
          rel={external ? 'noopener noreferrer' : undefined}
          target={external ? '_blank' : undefined}
          className={external ? 'external' : ''}
        >
          <span className="text">{title}</span>
        </Link>
      </li>
    ))}
  </ul>
);

const aboutSubmenu = {
  parent: 'About Us',
  items: [
    { title: 'Explore About Us', path: sitemap.about.path, mobile: true },
    { title: 'Meet the Team', path: sitemap['meet-the-team'].path },
    { title: 'Funders & Sponsors', path: sitemap.sponsors.path },
    { title: 'Useful Links', path: sitemap['useful-links'].path },
    { title: 'Contact Us', path: sitemap.contact.path },
  ],
};

const researchSubmenu = {
  parent: 'Research',
  items: [
    { title: 'Explore Research', path: sitemap.research.path, mobile: true },
    { title: 'Bottlenose Dolphin Studies', path: sitemap['bottlenose-dolphin-studies'].path },
    { title: 'Minke Whale Research', path: sitemap['minke-whale-studies'].path },
    { title: 'Photo-ID Catalogues', path: sitemap.catalogues.path },
    { title: 'Environmental Mitigation', path: sitemap['environmental-mitigation'].path },
    { title: 'Scientific Publications', path: sitemap.publications.path },
    { title: 'Collaborators', path: sitemap.collaborators.path },
  ],
};

const rescueSubmenu = {
  parent: 'Rescue',
  items: [
    { title: 'Explore Rescue', path: sitemap.rescue.path, mobile: true },
    { title: 'Report a Stranding', path: sitemap.stranded.path },
    { title: 'Rescue Training', path: sitemap['rescue-training'].path },
    { title: 'Species Identification Key', path: sitemap['species-identification-key'].path },
  ],
};

const educationSubmenu = {
  parent: 'Education',
  items: [
    { title: 'Explore Education', path: sitemap.education.path, mobile: true },
    { title: 'School Visits', path: sitemap['school-visits'].path },
    { title: 'Events & Talks', path: sitemap['events-and-talks'].path },
    { title: 'Stands & Exhibits', path: sitemap['stands-and-exhibits'].path },
    { title: 'Cetacean Fact Files', path: sitemap['cetacean-fact-files'].path },
  ],
};

const trainingSubmenu = {
  parent: 'Training',
  items: [
    { title: 'Explore Training', path: sitemap.training.path, mobile: true },
    { title: 'Summer Training Placements', path: sitemap['summer-training-placements'].path },
    { title: 'MMO Training Courses', path: sitemap['mmo-training'].path },
    { title: 'CPD PAM Training Courses', path: sitemap['pam-training'].path },
    { title: 'Gain University Credits', path: sitemap['gain-university-credits'].path },
  ],
};

const helpSubmenu = {
  parent: 'Help',
  items: [
    { title: 'Explore Help', path: sitemap.help.path, mobile: true },
    { title: 'Become a Friend', path: sitemap['become-a-friend'].path },
    { title: 'Fundraise for CRRU', path: sitemap['fundraising-support'].path },
    { title: 'Legacies & Bequests', path: sitemap.bequests.path },
    { title: 'Make a Donation', path: sitemap.donate.path },
  ],
};

enum Submenus {
  None = 'none',
  About = 'about',
  Research = 'research',
  Rescue = 'rescue',
  Education = 'education',
  Training = 'training',
  Help = 'help',
}

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

  const [open, setOpen] = useState<boolean>(false);
  const [submenu, setSubmenu] = useState<Submenus>(Submenus.None);

  const toggleMenu = () => {
    setOpen(!open);
    setSubmenu(Submenus.None);
  };

  const handleSubmenuOpen = (event: React.MouseEvent, target: Submenus) => {
    if (window.innerWidth > breakpointMobileMenu) {
      return;
    }

    event.preventDefault();
    setSubmenu(target);
  };

  useEffect(() => {
    document.body.classList.toggle('menu', open);
  }, [open]);

  // Close menu on any navigation
  useEffect(() => {
    router.events.on('routeChangeComplete', () => {
      setOpen(false);
      setSubmenu(Submenus.None);
    });
  }, [router]);

  return (
    <header>
      <div className="actions">
        <Link href={sitemap.shop.path} className="shop">Shop</Link>
        <Link href={sitemap.donate.path} className="donate">Donate</Link>
        <Link href={sitemap.news.path} className="news">News</Link>
        <Link href={sitemap.sightings.path} className="sighting">Report A Sighting</Link>
        <Link href={sitemap.stranded.path} className="stranding">Report A <br /> Stranding</Link>
      </div>

      <Link href={sitemap.home.path} className="logo">
        <Image
          src="/images/header/logo-header.png"
          width={200}
          height={200}
          title="CRRU"
          alt="CRRU logo"
          priority
          quality={100}
        />
      </Link>

      <nav>
        <ul className="menu">
          <li className="dropdown">
            <Link href={sitemap.about.path} onClick={(event) => handleSubmenuOpen(event, Submenus.About)}>
              <span>About Us</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.About} data={aboutSubmenu} />
          </li>
          <li className="dropdown">
            <Link href={sitemap.research.path} onClick={(event) => handleSubmenuOpen(event, Submenus.Research)}>
              <span>Research</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.Research} data={researchSubmenu} />
          </li>
          <li className="dropdown">
            <Link href={sitemap.rescue.path} onClick={(event) => handleSubmenuOpen(event, Submenus.Rescue)}>
              <span>Rescue</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.Rescue} data={rescueSubmenu} />
          </li>
          <li className="dropdown">
            <Link href={sitemap.education.path} onClick={(event) => handleSubmenuOpen(event, Submenus.Education)}>
              <span>Education</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.Education} data={educationSubmenu} />
          </li>
          <li className="dropdown">
            <Link href={sitemap.training.path} onClick={(event) => handleSubmenuOpen(event, Submenus.Training)}>
              <span>Training</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.Training} data={trainingSubmenu} />
          </li>
          <li className="dropdown">
            <Link href={sitemap.help.path} onClick={(event) => handleSubmenuOpen(event, Submenus.Help)}>
              <span>Help</span>
            </Link>
            <SubmenuItem active={submenu === Submenus.Help} data={helpSubmenu} />
          </li>
          <li className="mobile">
            <Link href={sitemap.news.path}>
              <span>News</span>
            </Link>
          </li>
          <li className="mobile">
            <Link href={sitemap.shop.path}>
              <span>Shop</span>
            </Link>
          </li>
        </ul>
      </nav>

      <Social />

      <button
        className="burger"
        onClick={toggleMenu}
        onKeyDown={toggleMenu}
      >
        <svg fill="none" height="48" viewBox="0 0 64 48" width="64" xmlns="http://www.w3.org/2000/svg" className="burger-icon">
          <path d="m2 14c2.03077 2.1662 5.46923 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0" stroke="#fff" strokeLinecap="round" strokeWidth="3" />
          <path d="m2 24c2.03077 2.1662 5.46923 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0" stroke="#fff" strokeLinecap="round" strokeWidth="3" />
          <path d="m19.845 25.2345c7.4508 3.474 7.9963 8.1523 7.5342 11.7654l9.2795.0001c-.4296-3.3798.2163-7.7552 7.5865-11.7654 11.2513-6.1371 8.5745-18.75909 8.241-21.48225-.2813-2.32254-1.4105-2.0334-2.5397-.8754-4.0957 5.64648-14.0742.98317-17.9465 9.12305-3.871-8.13997-13.7689-3.47666-17.8562-9.12314-1.1292-1.15791-2.2584-1.44714-2.5482.8754-.3321 2.72325-3.34951 16.06554 8.2494 21.48224z" fill="#0060c2" id="whale" />
          <path d="m0 34h64v14h-64z" fill="#000" />
          <path d="m2 34c2.03077 2.1662 5.46923 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0 2.0308 2.1662 5.4692 2.1662 7.5 0 2.0308-2.1662 5.4692-2.1662 7.5 0" stroke="#fff" strokeLinecap="round" strokeWidth="3" />
        </svg>
      </button>

      {submenu !== Submenus.None && (
        <button
          className="back"
          onClick={() => setSubmenu(Submenus.None)}
          onKeyDown={() => setSubmenu(Submenus.None)}
        >
          <svg fill="none" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg">
            <path clipRule="evenodd" d="m49.6454 1.33894c1.8061 1.78525 1.8061 4.67972 0 6.46498l-24.4797 24.19608 24.4797 24.1961c1.8061 1.7852 1.8061 4.6797 0 6.465-1.8062 1.7852-4.7346 1.7852-6.5408 0l-27.75-27.4286c-1.8061-1.7853-1.8061-4.6797 0-6.465l27.75-27.42856c1.8062-1.785253 4.7346-1.785253 6.5408 0z" fill="#fff" fillRule="evenodd" />
          </svg>
        </button>
      )}
    </header>
  );
};

export default Header;