From 50b1050b20e8602a3facb5afa2c76e429120500d Mon Sep 17 00:00:00 2001
From: FireStreaker2 <michaelccc2019@outlook.com>
Date: Thu, 14 Dec 2023 21:19:19 -0800
Subject: [PATCH] mobile navbar support

---
 package-lock.json               |   7 +-
 src/components/Header.tsx       | 121 +++++++++++++++++++-------------
 src/components/HeaderButton.tsx |  51 +++++++-------
 3 files changed, 104 insertions(+), 75 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9aa9c65..3c7a771 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
       },
       "devDependencies": {
         "@preact/preset-vite": "^2.5.0",
-        "@types/node": "^20.10.4",
         "autoprefixer": "^10.4.16",
         "concurrently": "^8.2.2",
         "eslint": "^8.55.0",
@@ -1357,6 +1356,8 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
       "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -5635,7 +5636,9 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/universalify": {
       "version": "2.0.1",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 15254d1..eca885b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,49 +1,72 @@
-import { HeaderButton } from "./HeaderButton";
-import { useTranslation } from "react-i18next";
-
-// Header icons
-import { HiOutlineCube } from "react-icons/hi";
-import { RxMixerVertical } from "react-icons/rx";
-import { RiLinksFill } from "react-icons/ri";
-
-export function Header() {
-  const { t } = useTranslation();
-
-  return (
-    <div
-      id="navbar"
-      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
-    >
-      <a href="/" class="w-1/2">
-        <div className="flex flex-row items-center">
-          <img
-            src="/logo.png"
-            className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
-          ></img>
-          <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
-            {t("header.title")}
-          </h1>
-        </div>
-      </a>
-      <div className="w-1/2">
-        <div className="flex flex-row items-center justify-end">
-          <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>
-  );
-}
+import { HeaderButton } from "./HeaderButton";
+import { useTranslation } from "react-i18next";
+import { Link } from "preact-router";
+
+// 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/2">
+        <div className="flex flex-row items-center">
+          <img
+            src="/logo.png"
+            className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
+          ></img>
+          <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
+            {t("header.title")}
+          </h1>
+        </div>
+      </Link>
+      <button
+        type="button"
+        className="z-10 md:hidden"
+        aria-expanded={isActive}
+        aria-controls="navbar-default"
+        onClick={() => setIsActive(!isActive)}
+      >
+        <RxHamburgerMenu />
+      </button>
+      <div
+        className={`z-5 fixed inset-0 flex md:relative md:right-0 ${
+          window.innerWidth <= 768 && !isActive && "hidden"
+        }`}
+      >
+        <div className="h-full w-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>
+    </div>
+  );
+}
diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx
index 2578891..94db292 100644
--- a/src/components/HeaderButton.tsx
+++ b/src/components/HeaderButton.tsx
@@ -1,24 +1,27 @@
-import { useTranslation } from "react-i18next";
-import { Link } from "preact-router";
-
-interface HeaderButtonProps {
-  href: string;
-  Icon: any;
-  translationKey: string;
-}
-
-export function HeaderButton(props: HeaderButtonProps) {
-  const { href, Icon, translationKey } = props;
-  const { t } = useTranslation();
-
-  return (
-    <Link href={href}>
-      <div className="group flex flex-row items-center p-4">
-        <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
-        <span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
-          {t(translationKey)}
-        </span>
-      </div>
-    </Link>
-  );
-}
+import { useTranslation } from "react-i18next";
+import { Link } from "preact-router";
+
+interface HeaderButtonProps {
+  href: string;
+  Icon: any;
+  translationKey: string;
+}
+
+export function HeaderButton(props: HeaderButtonProps) {
+  const { href, Icon, translationKey } = props;
+  const { t } = useTranslation();
+
+  return (
+    <Link
+      href={href}
+      className="flex h-full w-full bg-navbar-color sm:h-auto md:h-16"
+    >
+      <div className="group flex flex-row items-center p-4">
+        <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
+        <span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
+          {t(translationKey)}
+        </span>
+      </div>
+    </Link>
+  );
+}