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,49 +1,72 @@
-import { HeaderButton } from "./HeaderButton";
+import { HeaderButton } from "./HeaderButton";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-
+import { Link } from "preact-router";
-// Header icons
+
-import { HiOutlineCube } from "react-icons/hi";
+// Header icons
-import { RxMixerVertical } from "react-icons/rx";
+import { HiOutlineCube } from "react-icons/hi";
-import { RiLinksFill } from "react-icons/ri";
+import { RxMixerVertical, RxHamburgerMenu } from "react-icons/rx";
-
+import { RiLinksFill } from "react-icons/ri";
-export function Header() {
+import { useState } from "preact/hooks";
-  const { t } = useTranslation();
+
-
+export function Header() {
-  return (
+  const { t } = useTranslation();
-    <div
+  const [isActive, setIsActive] = useState(false);
-      id="navbar"
+
-      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
+  return (
-    >
+    <div
-      <a href="/" class="w-1/2">
+      id="navbar"
-        <div className="flex flex-row items-center">
+      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
-          <img
+    >
-            src="/logo.png"
+      <Link href="/" class="w-1/2">
-            className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
+        <div className="flex flex-row items-center">
-          ></img>
+          <img
-          <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
+            src="/logo.png"
-            {t("header.title")}
+            className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
-          </h1>
+          ></img>
-        </div>
+          <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
-      </a>
+            {t("header.title")}
-      <div className="w-1/2">
+          </h1>
-        <div className="flex flex-row items-center justify-end">
+        </div>
-          <HeaderButton
+      </Link>
-            href="/games"
+      <button
-            Icon={HiOutlineCube}
+        type="button"
-            translationKey="header.games"
+        className="z-10 md:hidden"
-          />
+        aria-expanded={isActive}
-          <HeaderButton
+        aria-controls="navbar-default"
-            href="/settings"
+        onClick={() => setIsActive(!isActive)}
-            Icon={RxMixerVertical}
+      >
-            translationKey="header.settings"
+        <RxHamburgerMenu />
-          />
+      </button>
-          <HeaderButton
+      <div
-            href="/discord"
+        className={`z-5 fixed inset-0 flex md:relative md:right-0 ${
-            Icon={RiLinksFill}
+          window.innerWidth <= 768 && !isActive && "hidden"
-            translationKey="header.discord"
+        }`}
-          />
+      >
-        </div>
+        <div className="h-full w-full">
-      </div>
+          <div
-    </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

@@ -1,24 +1,27 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import { Link } from "preact-router";
+import { Link } from "preact-router";
-
+
-interface HeaderButtonProps {
+interface HeaderButtonProps {
-  href: string;
+  href: string;
-  Icon: any;
+  Icon: any;
-  translationKey: string;
+  translationKey: string;
-}
+}
-
+
-export function HeaderButton(props: HeaderButtonProps) {
+export function HeaderButton(props: HeaderButtonProps) {
-  const { href, Icon, translationKey } = props;
+  const { href, Icon, translationKey } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslation();
-
+
-  return (
+  return (
-    <Link href={href}>
+    <Link
-      <div className="group flex flex-row items-center p-4">
+      href={href}
-        <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
+      className="flex h-full w-full bg-navbar-color sm:h-auto md:h-16"
-        <span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
+    >
-          {t(translationKey)}
+      <div className="group flex flex-row items-center p-4">
-        </span>
+        <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
-      </div>
+        <span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
-    </Link>
+          {t(translationKey)}
-  );
+        </span>
-}
+      </div>
+    </Link>
+  );
+}