116 lines
4 KiB
TypeScript
116 lines
4 KiB
TypeScript
import { HeaderButton } from "./HeaderButton";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "preact-router";
|
|
import { motion } from "framer-motion";
|
|
|
|
// Header icons
|
|
import { HiOutlineCube } from "react-icons/hi";
|
|
import { RxMixerVertical, RxHamburgerMenu } from "react-icons/rx";
|
|
import { RiLinksFill } from "react-icons/ri";
|
|
import { useState } from "preact/hooks";
|
|
|
|
export function Header() {
|
|
const { t } = useTranslation();
|
|
const [isActive, setIsActive] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
id="navbar"
|
|
className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
|
|
>
|
|
<Link href="/" class="w-1/8">
|
|
<div className="flex flex-row items-center">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Nebula Logo"
|
|
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
|
|
></img>
|
|
<h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
|
|
{t("header.title")}
|
|
</h1>
|
|
</div>
|
|
</Link>
|
|
<motion.button
|
|
type="button"
|
|
className="text-bold z-20 mr-4 text-3xl text-text-color md:hidden"
|
|
aria-expanded={isActive}
|
|
aria-controls="navbar-default"
|
|
onClick={() => setIsActive(!isActive)}
|
|
initial={{ rotate: 0 }}
|
|
animate={{ rotate: isActive ? 90 : 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<RxHamburgerMenu />
|
|
</motion.button>
|
|
{window.innerWidth >= 768 && (
|
|
//standard menu
|
|
<div
|
|
className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
|
|
window.innerWidth <= 768 && !isActive && "hidden"
|
|
}`}
|
|
>
|
|
<div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
|
|
<div
|
|
className="flex h-full w-full whitespace-nowrap"
|
|
onClick={() => setIsActive(false)}
|
|
>
|
|
<div className="flex w-full flex-col justify-evenly md:flex-row">
|
|
<HeaderButton
|
|
href="/games"
|
|
Icon={HiOutlineCube}
|
|
translationKey="header.games"
|
|
/>
|
|
<HeaderButton
|
|
href="/settings"
|
|
Icon={RxMixerVertical}
|
|
translationKey="header.settings"
|
|
/>
|
|
<HeaderButton
|
|
href="/discord"
|
|
Icon={RiLinksFill}
|
|
translationKey="header.discord"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{window.innerWidth <= 768 && (
|
|
//animated mobile menu
|
|
<motion.div
|
|
className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
|
|
window.innerWidth <= 768 && !isActive && "hidden"
|
|
}`}
|
|
initial={{ x: 0 }}
|
|
animate={{ x: isActive ? 0 : 1000 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
|
|
<div
|
|
className="flex h-full w-full whitespace-nowrap"
|
|
onClick={() => setIsActive(false)}
|
|
>
|
|
<div className="flex w-full flex-col justify-evenly md:flex-row">
|
|
<HeaderButton
|
|
href="/games"
|
|
Icon={HiOutlineCube}
|
|
translationKey="header.games"
|
|
/>
|
|
<HeaderButton
|
|
href="/settings"
|
|
Icon={RxMixerVertical}
|
|
translationKey="header.settings"
|
|
/>
|
|
<HeaderButton
|
|
href="/discord"
|
|
Icon={RiLinksFill}
|
|
translationKey="header.discord"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|