Merge pull request #178 from MotorTruck1221/rewrite

Fix up Mobile support

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
-      id="navbar"
-      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
-    >
+    <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>
+          <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
-        type="button"
-        className="z-20 md:hidden"
-        aria-expanded={isActive}
-        aria-controls="navbar-default"
-        onClick={() => setIsActive(!isActive)}
-      >
-        <RxHamburgerMenu />
-      </button>
-      <div
-        className={`fixed inset-0 z-10 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"
-              />
+      <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 }} >
+            <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="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>
-          </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"
-    >
-      <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">
+      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">
+        <Icon className="h-10 w-10 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
+        <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">
           {t(translationKey)}
         </span>
       </div>

src/pages/Home.tsx

@@ -19,11 +19,11 @@ export function Home() {
         <title>{t("titles.home")}</title>
       </Helmet>
       <div class="flex h-full flex-col items-center justify-center">
-        <div class="font-inter absolute bottom-0 left-0 p-1 text-sm italic text-input-text">
+        <div class="font-inter absolute bottom-0 left-0 p-4 text-sm italic text-input-text">
           Nebula &copy; Nebula Services {new Date().getUTCFullYear()}
         </div>
         <a href="https://github.com/NebulaServices/Nebula">
-          <div class="font-inter absolute bottom-0 right-0 p-1 text-sm text-input-text">
+          <div class="font-inter absolute bottom-0 right-0 p-4 text-sm text-input-text">
             GitHub
           </div>
         </a>
@@ -44,7 +44,7 @@ export function Home() {
               setInputValue((e.target as HTMLInputElement).value)
             }
             className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
-              isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
+              isFocused ? "w-10/12 md:w-3/12" : "w-80"
             } transition-all duration-300`}
             placeholder={isFocused ? "" : t("home.placeholder")}
           />

src/pages/Settings/Customization.tsx

@@ -10,7 +10,7 @@ const Customization = ({ id, active }) => (
     animate={active ? "active" : "inactive"}
     initial="inactive"
   >
-    <motion.div variants={settingsPageVariant} className="content-card">
+    <motion.div variants={settingsPageVariant} className="content-card text-center w-full flex flex-col justify-center items-center">
       <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
       <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>

src/pages/Settings/Misc.tsx

@@ -23,7 +23,7 @@ const Misc = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card flex flex-row flex-wrap justify-around"
+        className="content-card flex flex-row flex-wrap justify-center w-full 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="text-3xl">{t("settings.languages.title")}</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>

src/pages/Settings/TabSettings.tsx

@@ -10,8 +10,8 @@ const TabSettings = ({ id, active }) => (
     animate={active ? "active" : "inactive"}
     initial="inactive"
   >
-    <motion.div variants={settingsPageVariant} className="content-card">
-      <img src="/comingsoonsnake.png" class="h-72"></img>
+    <motion.div variants={settingsPageVariant} className="content-card text-center w-full flex flex-col justify-center items-center">
+      <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
       <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>
   </motion.div>