Merge pull request #2 from adedolapoadegboye/code-refactor

mobile menu added. Header and Footer code refactor
adedolapoadegboye · Jul 13, 2024 · e0cf70c · e0cf70c
2 parents a8d953d + 3ebd502
commit e0cf70c
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gnssmetrics",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="GNSS Metrics is a comprehensive repository designed for evaluating the accuracy and precision of GNSS (Global Navigation Satellite System) receivers"
+      content="gnssmetrics.com is a web application designed to provide comprehensive accuracy and precision metrics and analysis for GNSS (Global Navigation Satellite System) static position fix testing"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--

diff --git a/public/logo.png b/public/logo.png
diff --git a/src/Dev/Components/Constants/Footer.jsx b/src/Dev/Components/Constants/Footer.jsx
@@ -1,53 +1,14 @@
 import React from "react";
-// import {
-//   FaSquareGithub,
-//   FaLinkedin,
-//   FaSquareXTwitter,
-//   FaSquareInstagram,
-//   FaBoxArchive,
-// } from "react-icons/fa6";
+import packageJson from "../../../../package.json";
 
 const Footer = () => {
   return (
     <footer className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-evenly items-center font-normal">
       <div>
-        <p className="text-xs md:text-sm">
-          &#169; Copyright 2024 GNSSMetrics.com
+        <p className="text-xs sm:text-sm md:text-md">
+          &#169; Copyright 2024 GNSSMetrics.com v{packageJson.version}
         </p>
       </div>
-      {/* <div className="flex gap-2 sm:gap-6">
-        <a
-          href="https://github.com/adedolapoadegboye"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaSquareGithub size={25} />
-        </a>
-        <a
-          href="https://www.linkedin.com/in/adegboyeadedolapo"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaLinkedin size={25} />
-        </a>
-        <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
-          <FaBoxArchive size={25} />
-        </a>
-        <a
-          href="https://www.instagram.com/adethedeveloper"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaSquareInstagram size={25} />
-        </a>
-        <a
-          href="https://twitter.com/AdeTheDeveloper"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaSquareXTwitter size={25} />
-        </a>
-      </div> */}
     </footer>
   );
 };

diff --git a/src/Dev/Components/Constants/Header.jsx b/src/Dev/Components/Constants/Header.jsx
@@ -1,46 +1,88 @@
-import React from "react";
+import React, { useState } from "react";
 import { IoIosMenu } from "react-icons/io";
 import { RiGpsFill } from "react-icons/ri";
 import Name from "../../Styles/Name";
 import Navbar from "../Nav/Navbar";
 import { FaSquareGithub, FaLinkedin, FaBoxArchive } from "react-icons/fa6";
 
 const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
-    <div className="flex gap-2 items-center justify-between px-2 sm:px-4">
-      <button className="hidden">
-        <IoIosMenu size={35} />
-      </button>
-      <div className="flex gap-2">
-        <button>
-          <RiGpsFill size={35} color="black" />
+    <div className="relative">
+      <div className="flex items-center justify-between px-4 sm:px-8 md:px-12">
+        <button className="sm:hidden" onClick={toggleMenu}>
+          <IoIosMenu size={30} />
         </button>
-        <div>
-          <Name />
+        <div className="flex justify-center w-full sm:w-auto sm:justify-start items-center gap-2">
+          <button>
+            <RiGpsFill size={35} className="md:hidden" />
+            <RiGpsFill size={45} className="hidden md:block" />
+          </button>
+          <div className="flex items-center">
+            <Name />
+          </div>
+        </div>
+        <div className="hidden sm:flex gap-4">
+          <Navbar />
+        </div>
+        <div className="hidden sm:flex gap-4">
+          <a
+            href="https://github.com/adedolapoadegboye/gnss-metrics"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaSquareGithub size={25} />
+          </a>
+          <a
+            href="https://www.linkedin.com/in/adegboyeadedolapo"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaLinkedin size={25} />
+          </a>
+          <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
+            <FaBoxArchive size={25} />
+          </a>
         </div>
       </div>
-      <div className="sm:flex gap-4 hidden">
-        <Navbar />
-      </div>
-      <div className="flex gap-4">
-        <a
-          href="https://github.com/adedolapoadegboye/gnss-metrics"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaSquareGithub size={25} />
-        </a>
-        <a
-          href="https://www.linkedin.com/in/adegboyeadedolapo"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FaLinkedin size={25} />
-        </a>
-        <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
-          <FaBoxArchive size={25} />
-        </a>
-      </div>
+      {isMenuOpen && (
+        <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
+          <div className="bg-white w-11/12 sm:w-3/4 p-4 rounded-lg flex flex-col gap-6 relative">
+            <button
+              onClick={toggleMenu}
+              className="absolute top-2 right-2 text-red-600 text-lg hover:bg-red-200 rounded-full p-1"
+              aria-label="Close"
+            >
+              &#10005;
+            </button>
+            <Navbar />
+            <div className="flex justify-center gap-6">
+              <a
+                href="https://github.com/adedolapoadegboye/gnss-metrics"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <FaSquareGithub size={25} />
+              </a>
+              <a
+                href="https://www.linkedin.com/in/adegboyeadedolapo"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <FaLinkedin size={25} />
+              </a>
+              <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
+                <FaBoxArchive size={25} />
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/Dev/Components/Nav/Navbar.jsx b/src/Dev/Components/Nav/Navbar.jsx
@@ -3,34 +3,26 @@ import { NavLink } from "react-router-dom";
 
 const Navbar = () => {
   return (
-    <nav className="flex gap-8 items-center justify-between py-2 px-2">
+    <nav className="flex flex-col sm:flex-row gap-8 items-center justify-center sm:justify-between py-2 px-2">
       <NavLink
-        to={"/"}
-        className={({ isActive, isPending, isTransitioning }) =>
-          [
-            isPending ? `` : ``,
-            isActive
-              ? `h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500`
-              : `font-normal`,
-            isTransitioning ? `` : ``,
-          ].join(" ")
+        to="/"
+        className={({ isActive }) =>
+          isActive
+            ? "h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
+            : "font-normal"
         }
       >
-        Load from file
+        Load Data from File
       </NavLink>
       <NavLink
-        to={"/live"}
-        className={({ isActive, isPending, isTransitioning }) =>
-          [
-            isPending ? `` : ``,
-            isActive
-              ? `h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500`
-              : `font-normal`,
-            isTransitioning ? `` : ``,
-          ].join(" ")
+        to="/live"
+        className={({ isActive }) =>
+          isActive
+            ? "h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
+            : "font-normal"
         }
       >
-        Connect to live test
+        Analyze Live Data
       </NavLink>
     </nav>
   );

diff --git a/src/Dev/Homepage.jsx b/src/Dev/Homepage.jsx
@@ -17,13 +17,13 @@ const Homepage = () => {
       }
     >
       <div className="max-w-screen h-full flex flex-col bg-gray-100 overflow-y-auto relative">
-        <div className="h-1/8 w-full border-b-2 border-gray-200 fixed top-0 z-10 bg-white bg-opacity-100">
+        <div className="h-1/8 w-full border-b-2 border-gray-200 fixed top-0 z-10 bg-white bg-opacity-100 pt-2 md:pt-4 pb-2 md:pb-4">
           <Header />
         </div>
-        <div className="h-full w-full px-[calc(5vw)] sm:px-[calc(10vw)] py-[2vw] pt-[8vh] sm:pt-[10vh]">
+        <div className="h-full w-full px-[5vw] sm:px-[10vw] py-[2vw] pt-[12vh] sm:pt-[15vh]">
           <FromFile />
         </div>
-        <div className="h-1/8 w-full border-t-2 pt-6 pb-6 bg-white">
+        <div className="h-1/8 w-full border-t-2 pt-4 md:pt-8 pb-4 md:pb-8 bg-white">
           <Footer />
         </div>
       </div>