Mobile nav update

src/components/Header.tsx

@@ -1,6 +1,7 @@
 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";
@@ -13,60 +14,50 @@ export function Header() {
   const [isActive, setIsActive] = useState(false);
 
   return (
-    <div
+    <div id="navbar" className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4">
-      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
+          <img src="/logo.png" className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"></img>
-            src="/logo.png"
-            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>
-      <button
+      <motion.button type="button" className="z-20 md:hidden text-text-color text-bold text-3xl mr-4" aria-expanded={isActive} aria-controls="navbar-default" onClick={() => setIsActive(!isActive)} initial={{ rotate: 0 }} animate={{ rotate: isActive ? 90 : 0 }} transition={{ duration: 0.5 }} >
-        type="button"
-        className="z-20 md:hidden"
-        aria-expanded={isActive}
-        aria-controls="navbar-default"
-        onClick={() => setIsActive(!isActive)}
-      >
             <RxHamburgerMenu />
-      </button>
+      </motion.button>
-      <div
+      {window.innerWidth >= 768 &&
-        className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
+        //standard menu
-          window.innerWidth <= 768 && !isActive && "hidden"
+        <div className={`fixed inset-0 z-10 flex md:relative md:right-0 ${ window.innerWidth <= 768 && !isActive && "hidden"}`}>
-        }`}
+            <div className="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
-      >
+            <div className="flex h-full w-full whitespace-nowrap" onClick={() => setIsActive(false)} >
-        <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
+                <HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
-                href="/games"
+                <HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
-                Icon={HiOutlineCube}
+                <HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
-                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="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
+                <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>
   );
 }

src/components/HeaderButton.tsx

@@ -14,11 +14,10 @@ export function HeaderButton(props: HeaderButtonProps) {
   return (
     <Link
       href={href}
-      className="flex h-full w-full bg-navbar-color sm:h-auto md:h-16"
+      className="flex h-full w-full bg-navbar-color sm:h-auto">
-    >
+      <div className="group flex flex-row items-center justify-center p-4 w-full border-t-2 border-solid border-navbar-text-color md:border-none">
-      <div className="group flex flex-row items-center p-4">
+        <Icon className="h-10 w-10 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
-        <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
+        <span className="font-roboto pl-1 text-text-color text-4xl text-center font-bold transition duration-500 group-hover:text-text-hover-color md:text-lg">
-        <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>

src/pages/Settings/Proxy.tsx

@@ -30,7 +30,7 @@ const Proxy = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card justify-left flex w-full flex-row flex-wrap gap-4"
+        className="content-card justify-center flex w-full flex-row flex-wrap gap-4"
       >
         <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
           <div class="p-2 text-3xl">{t("settings.proxy.title")}</div>