mobile navbar support

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",

src/components/Header.tsx

@@ -1,20 +1,23 @@
 import { HeaderButton } from "./HeaderButton";
 import { useTranslation } from "react-i18next";
+import { Link } from "preact-router";
 
 // Header icons
 import { HiOutlineCube } from "react-icons/hi";
-import { RxMixerVertical } from "react-icons/rx";
+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"
     >
-      <a href="/" class="w-1/2">
+      <Link href="/" class="w-1/2">
         <div className="flex flex-row items-center">
           <img
             src="/logo.png"
@@ -24,24 +27,44 @@ export function Header() {
             {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"
-          />
+      </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>

src/components/HeaderButton.tsx

@@ -12,7 +12,10 @@ export function HeaderButton(props: HeaderButtonProps) {
   const { t } = useTranslation();
 
   return (
-    <Link href={href}>
+    <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">