fe/components/common/Header/index.tsx

import { useCallback, useState } from "react";
import clsx from "clsx";
import Link from "next/link";
import ClickAwayListener from "@mui/base/ClickAwayListener";

import logo from "../../../public/logo.svg";

export default function Header() {
  const [open, setOpen] = useState(false);

  const toggleMenu = useCallback(() => {
    setOpen((o) => !o);
  }, [setOpen]);

  const closeMenu = useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  return (
    <header className={clsx("header", { open })}>
      <ClickAwayListener onClickAway={closeMenu}>
        <div className="container">
          <Link href="/">
            <a className="logo" title="NovelDit">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={logo.src} alt="NovelDit" />
              <span>NovelDit</span>
            </a>
          </Link>
          <div className="menu">
            <nav>
              <ul>
                <li>
                  <a className="menu-item" href="" title="Browse">
                    <svg width="24" height="24">
                      <use href="/icons.svg#browse"></use>
                    </svg>
                    <strong>Browse</strong>
                  </a>
                  <div className="sub-menu">
                    <ul className="sub-menu-sized">
                      <li>
                        <a href="/stories/novel" title="Novels">
                          Novels
                        </a>
                        <div className="sub-menu-list">
                          <p>
                            <strong>MALE LEAD</strong>
                            <a href="/stories/novel-urban-male" title="Urban">
                              Urban
                            </a>
                            <a
                              href="/stories/novel-eastern-male"
                              title="Eastern"
                            >
                              Eastern
                            </a>
                            <a href="/stories/novel-games-male" title="Games">
                              Games
                            </a>
                            <a
                              href="/stories/novel-fantasy-male"
                              title="Fantasy"
                            >
                              Fantasy
                            </a>
                            <a href="/stories/novel-scifi-male" title="Sci-fi">
                              Sci-fi
                            </a>
                            <a href="/stories/novel-acg-male" title="ACG">
                              ACG
                            </a>
                            <a href="/stories/novel-horror-male" title="Horror">
                              Horror
                            </a>
                            <a href="/stories/novel-sports-male" title="Sports">
                              Sports
                            </a>
                            <a href="/stories/novel-action-male" title="Action">
                              Action
                            </a>
                            <a href="/stories/novel-war-male" title="War">
                              War
                            </a>
                            <a
                              href="/stories/novel-realistic-male"
                              title="Realistic"
                            >
                              Realistic
                            </a>
                            <a
                              href="/stories/novel-history-male"
                              title="History"
                            >
                              History
                            </a>
                          </p>
                          <p>
                            <strong>FEMALE LEAD</strong>
                            <a href="/stories/novel-urban-female" title="Urban">
                              Urban
                            </a>
                            <a
                              href="/stories/novel-fantasy-female"
                              title="Fantasy"
                            >
                              Fantasy
                            </a>
                            <a
                              href="/stories/novel-history-female"
                              title="History"
                            >
                              History
                            </a>
                            <a href="/stories/novel-teen-female" title="Teen">
                              Teen
                            </a>
                            <a href="/stories/novel-lgbt-female" title="LGBT+">
                              LGBT+
                            </a>
                            <a
                              href="/stories/novel-scifi-female"
                              title="Sci-fi"
                            >
                              Sci-fi
                            </a>
                            <a
                              href="/stories/novel-general-female"
                              title="General"
                            >
                              General
                            </a>
                          </p>
                        </div>
                      </li>
                      <li>
                        <a href="/stories/fanfic" title="Fan-fic">
                          Fan-fic
                        </a>
                        <div className="sub-menu-list">
                          <p>
                            <a
                              href="/stories/fanfic-anime-comics"
                              title="Anime &amp; Comics"
                            >
                              Anime &amp; Comics
                            </a>
                            <a
                              href="/stories/fanfic-video-games"
                              title="Video Games"
                            >
                              Video Games
                            </a>
                            <a
                              href="/stories/fanfic-celebrities"
                              title="Celebrities"
                            >
                              Celebrities
                            </a>
                            <a
                              href="/stories/fanfic-music-bands"
                              title="Music &amp; Bands"
                            >
                              Music &amp; Bands
                            </a>
                            <a href="/stories/fanfic-movies" title="Movies">
                              Movies
                            </a>
                            <a
                              href="/stories/fanfic-book-literature"
                              title="Book&amp;Literature"
                            >
                              Book&amp;Literature
                            </a>
                            <a href="/stories/fanfic-tv" title="TV">
                              TV
                            </a>
                            <a href="/stories/fanfic-theater" title="Theater">
                              Theater
                            </a>
                            <a href="/stories/fanfic-others" title="Others">
                              Others
                            </a>
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a className="menu-item" href="" title="Rankings">
                    <svg viewBox="0 0 1024 1024" width="24" height="24">
                      <use href="/icons.svg#ranking"></use>
                    </svg>
                    <strong>Rankings</strong>
                  </a>
                  <div className="sub-menu">
                    <ul>
                      <li>
                        <a
                          href="/ranking/novel/bi_annual/power_rank?timeType=3&amp;sourceType=2&amp;signStatus=1"
                          title="Novels ranking"
                        >
                          Novels ranking
                        </a>
                      </li>
                      <li>
                        <a
                          href="/ranking/comic/all_time/comic_power_rank"
                          title="Comics ranking"
                        >
                          Comics ranking
                        </a>
                      </li>
                      <li>
                        <a
                          href="/ranking/fanfic/bi_annual/power_rank"
                          title="Fan-fic ranking"
                        >
                          Fan-fic ranking
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </nav>
            <form action="./search" className="search-input">
              <svg className="icon-search">
                <use href="/icons.svg#search"></use>
              </svg>
              <input type="search" name="q" placeholder="Search" />
            </form>
          </div>
          <div className="buttons">
            <button className="menu-btn" onClick={toggleMenu}>
              <svg
                className="icon-menu"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
              >
                <rect
                  x="1"
                  y="4"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-1"
                ></rect>
                <rect
                  x="1"
                  y="7.25"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-2"
                ></rect>
                <rect
                  x="1"
                  y="10.5"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-3"
                ></rect>
              </svg>
            </button>
          </div>
        </div>
      </ClickAwayListener>
    </header>
  );
}