From 35f5fb3b304aee95d1686fe1b897e83d94c2214e Mon Sep 17 00:00:00 2001
From: ChaseSizemore <ChaseLSizemore@gmail.com>
Date: Sun, 3 Dec 2023 23:38:37 -0500
Subject: [PATCH 1/3] changed strokeWidth error

---
 components/NavBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 69a8fef..4003ac1 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -37,10 +37,10 @@ export default function NavBar(): JSX.Element {
                     onClick={() => setMenuOpen(!menuOpen)}
                   >
                     <span className="sr-only">Open main menu</span>
-                    <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
                       <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                     </svg>
-                    <svg className="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <svg className="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
                       <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                     </svg>
                   </button>

From 15172e9da0ee0f4e832a5730ccaefb42df83582d Mon Sep 17 00:00:00 2001
From: ChaseSizemore <ChaseLSizemore@gmail.com>
Date: Mon, 4 Dec 2023 03:21:38 -0500
Subject: [PATCH 2/3] removed navbar from individual pages and added it on
 _app.tsx, created modern and repsonse header, css styles

---
 components/Header.tsx | 173 ++++++++++++++++++++++++++++++++++++++++++
 pages/_app.tsx        |   4 +-
 pages/docs.tsx        |   3 +-
 pages/index.tsx       |   3 +-
 pages/team.tsx        |   6 +-
 styles/globals.css    | 135 ++++++++++++++++++++++++++++++++
 6 files changed, 319 insertions(+), 5 deletions(-)
 create mode 100644 components/Header.tsx

diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..09114da
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,173 @@
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
+import logo from '../public/1.png';
+
+const navigation = {
+  main: [
+    { name: 'Home', href: '/' },
+    { name: 'Docs', href: '/docs' },
+    { name: 'Team', href: '/team' },
+  ],
+};
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: any;
+
+    if (isMenuOpen) {
+      setShouldRender(true);
+    } else if (!isMenuOpen && shouldRender) {
+      timeoutId = setTimeout(() => {
+        setShouldRender(false);
+      }, 300); // Duration of the fade-out animation
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [isMenuOpen, shouldRender]);
+
+  /**
+   * Handles the resize event and closes the menu if the window width is greater than or equal to the md breakpoint.
+   */
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        // Tailwind's md breakpoint
+        setIsMenuOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    // Clean up the event listener
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  /**
+   * Prevent scrolling when the mobile menu is open
+   */
+
+
+  return (
+    <>
+      <nav className="pt-5">
+        <div className="container mx-auto transition-all duration-300 px-6 py-3 flex justify-between items-center">
+          {/* Logo and Title */}
+          <div className="flex justify-center">
+            <img className="h-12 w-auto pr-2" src={logo.src} alt="SeeQR Logo" />
+            <a className="text-4xl font-semibold text-gray-700" href="/">
+              SeeQR
+            </a>
+          </div>
+
+          {/* Navigation */}
+          <div className="flex items-center flex-grow justify-center">
+            <div className="hidden md:flex space-x-8 mr-15">
+              {navigation.main.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className="text-gray-800 hover:text-gray-500"
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          {/* Source Code Link */}
+          <div className="hidden md:flex items-center space-x-4">
+            <button
+              onClick={() => {
+                window.open('https://github.com/open-source-labs/SeeQR');
+              }}
+              type="button"
+              className="rounded-full bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition duration-300"
+            >
+              Source Code
+            </button>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            className="button-three md:hidden"
+            aria-controls="primary-navigation"
+            aria-expanded={isMenuOpen}
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <svg
+              stroke="var(--button-color)"
+              fill="none"
+              className="hamburger"
+              viewBox="-10 -10 120 120"
+              width="40"
+            >
+              <path
+                className="line"
+                strokeWidth="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        {/* Mobile Navigation */}
+
+        {shouldRender && (
+          <>
+            <div
+              className={` absolute w-full z-40 inset-x-0  origin-top-right md:hidden mobile-navigation ${
+                isMenuOpen ? 'fade-in' : 'fade-out'
+              }`}
+            >
+              <div className=" shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
+                <div className="px-2 py-2 pb-3 space-y-1">
+                  <Link
+                    href="/"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
+                  >
+                    Home
+                  </Link>
+                  <Link
+                    href="/docs"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
+                  >
+                    Docs
+                  </Link>
+                  <Link
+                    href="/team"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
+                  >
+                    Team
+                  </Link>
+                  <Link
+                    href="https://github.com/open-source-labs/SeeQR"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
+                  >
+                    Source Code
+                  </Link>
+                
+                </div>
+              </div>
+            </div>
+            <div
+              className={`absolute bg-black h-full w-full opacity-60 ${
+                isMenuOpen ? 'modal-fade-in' : 'modal-fade-out'
+              }`}
+            ></div>
+          </>
+        )}
+      </nav>
+    </>
+  );
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1d9789d..4e4d18f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import FavIcon from "../public/favicon.ico";
+import Header from "@/components/Header";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -9,7 +10,8 @@ export default function App({ Component, pageProps }: AppProps) {
       <Head>
         <title>SeeQR</title>
       </Head>
-      <Component {...pageProps} />
+      <Header />
+      <Component {...pageProps} id = "grayModal"/>
     </>
   );
 }
diff --git a/pages/docs.tsx b/pages/docs.tsx
index a71658a..c986304 100644
--- a/pages/docs.tsx
+++ b/pages/docs.tsx
@@ -1,9 +1,10 @@
 import NavBar from "@/components/NavBar";
+import Header from "@/components/Header";
 
 export default function Docs() {
   return (
     <>
-      <NavBar />
+      {/* <NavBar /> */}
       <div>
         <iframe
           src="https://master--zippy-naiad-6561d5.netlify.app/docs/intro"
diff --git a/pages/index.tsx b/pages/index.tsx
index d611279..e3a6f05 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,12 @@
 import NavBar from "@/components/NavBar";
 import Main from "@/components/Main";
 import Footer from "@/components/Footer";
+import Header from "@/components/Header";
 
 export default function Home() {
   return (
     <>
-      <NavBar />
+      {/* <NavBar /> */}
       <Main />
       <Footer />
     </>
diff --git a/pages/team.tsx b/pages/team.tsx
index 800e26e..be524e2 100644
--- a/pages/team.tsx
+++ b/pages/team.tsx
@@ -1,11 +1,13 @@
 import Team from '../components/Team';
 import NavBar from '../components/NavBar';
 import Footer from '../components/Footer';
+import Header from '@/components/Header';
+import Head from 'next/head';
 
 const TeamPage = () => {
   return (
     <div className="my-50">
-      <NavBar />
+      {/* <NavBar /> */}
       <div className="flex flex-col justify-center items-center pt-4 ">
         <h1 className="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl">
           <span className="text-black">The Team</span>
@@ -17,4 +19,4 @@ const TeamPage = () => {
   );
 };
 
-export default TeamPage;
\ No newline at end of file
+export default TeamPage;
diff --git a/styles/globals.css b/styles/globals.css
index 2574518..5e43e36 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -25,3 +25,138 @@ body {
     )
     rgb(var(--background-start-rgb));
 } */
+
+.button-three {
+  --button-color: black;
+  overflow: hidden;
+}
+
+.button-three .hamburger {
+  transition: translate 1s, rotate 1s;
+}
+
+.button-three[aria-expanded='true'] .hamburger {
+  translate: 10px -10px;
+  rotate: 0.125turn;
+}
+
+.button-three .line {
+  transition: 1s;
+  stroke-dasharray: 60 31 60 300;
+}
+
+.button-three[aria-expanded='true'] .line {
+  stroke-dasharray: 60 105 60 300;
+  stroke-dashoffset: -90;
+}
+
+@keyframes fadeInBounce {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  60% {
+    transform: translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animated-link {
+  opacity: 0;
+  animation: fadeInBounce 0.5s ease forwards;
+}
+
+.animated-link:nth-child(1) {
+  animation-delay: 0.3s;
+}
+
+.animated-link:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.animated-link:nth-child(3) {
+  animation-delay: 0.5s;
+}
+.animated-link:nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+@keyframes fadeOutSlideLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+}
+
+.fade-out-slide-left {
+  animation: fadeOutSlideLeft 1s ease forwards;
+}
+
+
+
+@keyframes fadeInDiv {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutDiv {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.mobile-navigation {
+  opacity: 0; /* Start with the div being fully transparent */
+  animation: fadeInDiv 0.3s ease forwards; /* Set a faster duration, e.g., 0.3s */
+}
+
+.fade-in {
+  animation: fadeInDiv 0.3s ease forwards;
+}
+
+.fade-out {
+  animation: fadeOutDiv 0.3s ease forwards;
+}
+
+
+
+@keyframes modalFadeIn{
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 60%;
+  } 
+}
+
+@keyframes modalFadeOut{
+  from {
+    opacity: 60%;
+  }
+  to {
+    opacity: 0;
+  } 
+}
+
+.modal-fade-in {
+  opacity: 0;
+  animation: modalFadeIn 0.3s ease forwards;
+}
+
+.modal-fade-out {
+  animation: modalFadeOut 0.3s ease forwards;
+}

From b38b2e77ed97e44f3bc0525ad76f5acf21c6103b Mon Sep 17 00:00:00 2001
From: ChaseSizemore <ChaseLSizemore@gmail.com>
Date: Mon, 4 Dec 2023 13:17:57 -0500
Subject: [PATCH 3/3] removed extra css, changed header svg to tackle load
 problem

---
 components/Header.tsx | 96 +++++++++++++++----------------------------
 styles/globals.css    | 68 +++++++++++++++++++-----------
 2 files changed, 78 insertions(+), 86 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 09114da..f58edc2 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -14,24 +14,6 @@ export default function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [shouldRender, setShouldRender] = useState(false);
 
-  useEffect(() => {
-    let timeoutId: any;
-
-    if (isMenuOpen) {
-      setShouldRender(true);
-    } else if (!isMenuOpen && shouldRender) {
-      timeoutId = setTimeout(() => {
-        setShouldRender(false);
-      }, 300); // Duration of the fade-out animation
-    }
-
-    return () => clearTimeout(timeoutId);
-  }, [isMenuOpen, shouldRender]);
-
-  /**
-   * Handles the resize event and closes the menu if the window width is greater than or equal to the md breakpoint.
-   */
-
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth >= 768) {
@@ -40,17 +22,13 @@ export default function Header() {
       }
     };
     window.addEventListener('resize', handleResize);
-    // Clean up the event listener
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   /**
    * Prevent scrolling when the mobile menu is open
    */
 
-
   return (
     <>
       <nav className="pt-5">
@@ -92,32 +70,39 @@ export default function Header() {
           </div>
 
           {/* Mobile menu button */}
+
           <button
-            className="button-three md:hidden"
-            aria-controls="primary-navigation"
+            className={`md:hidden menu ${isMenuOpen ? 'opened' : ''}`}
+            onClick={() => {
+              if (!isMenuOpen) {
+                setIsMenuOpen(true);
+                setShouldRender(true);
+              } else {
+                setIsMenuOpen(false);
+                setTimeout(() => {
+                  setShouldRender(false);
+                }, 300); // Duration of the fade-out animation
+              }
+            }}
+            aria-label="Main Menu"
             aria-expanded={isMenuOpen}
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
-            <svg
-              stroke="var(--button-color)"
-              fill="none"
-              className="hamburger"
-              viewBox="-10 -10 120 120"
-              width="40"
-            >
+            <svg width="35" height="35" viewBox="0 0 100 100">
               <path
-                className="line"
-                strokeWidth="10"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
-              ></path>
+                className="line line1"
+                d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
+              />
+              <path className="line line2" d="M 20,50 H 80" />
+              <path
+                className="line line3"
+                d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
+              />
             </svg>
           </button>
         </div>
         {/* Mobile Navigation */}
 
-        {shouldRender && (
+        {isMenuOpen && (
           <>
             <div
               className={` absolute w-full z-40 inset-x-0  origin-top-right md:hidden mobile-navigation ${
@@ -126,27 +111,15 @@ export default function Header() {
             >
               <div className=" shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
                 <div className="px-2 py-2 pb-3 space-y-1">
-                  <Link
-                    href="/"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
-                  >
-                    Home
-                  </Link>
-                  <Link
-                    href="/docs"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
-                  >
-                    Docs
-                  </Link>
-                  <Link
-                    href="/team"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
-                  >
-                    Team
-                  </Link>
+                  {navigation.main.map((item) => (
+                    <Link
+                      key={item.name}
+                      href={item.href}
+                      className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 animated-link"
+                    >
+                      {item.name}
+                    </Link>
+                  ))}
                   <Link
                     href="https://github.com/open-source-labs/SeeQR"
                     target="_blank"
@@ -156,7 +129,6 @@ export default function Header() {
                   >
                     Source Code
                   </Link>
-                
                 </div>
               </div>
             </div>
diff --git a/styles/globals.css b/styles/globals.css
index 5e43e36..531f4b5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,30 +26,6 @@ body {
     rgb(var(--background-start-rgb));
 } */
 
-.button-three {
-  --button-color: black;
-  overflow: hidden;
-}
-
-.button-three .hamburger {
-  transition: translate 1s, rotate 1s;
-}
-
-.button-three[aria-expanded='true'] .hamburger {
-  translate: 10px -10px;
-  rotate: 0.125turn;
-}
-
-.button-three .line {
-  transition: 1s;
-  stroke-dasharray: 60 31 60 300;
-}
-
-.button-three[aria-expanded='true'] .line {
-  stroke-dasharray: 60 105 60 300;
-  stroke-dashoffset: -90;
-}
-
 @keyframes fadeInBounce {
   0% {
     opacity: 0;
@@ -160,3 +136,47 @@ body {
 .modal-fade-out {
   animation: modalFadeOut 0.3s ease forwards;
 }
+
+
+
+.menu {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+}
+.line {
+  fill: none;
+  stroke: black;
+  stroke-width: 6;
+  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.line1 {
+  stroke-dasharray: 60 207;
+  stroke-width: 6;
+}
+.line2 {
+  stroke-dasharray: 60 60;
+  stroke-width: 6;
+}
+.line3 {
+  stroke-dasharray: 60 207;
+  stroke-width: 6;
+}
+.opened .line1 {
+  stroke-dasharray: 90 207;
+  stroke-dashoffset: -134;
+  stroke-width: 6;
+}
+.opened .line2 {
+  stroke-dasharray: 1 60;
+  stroke-dashoffset: -30;
+  stroke-width: 6;
+}
+.opened .line3 {
+  stroke-dasharray: 90 207;
+  stroke-dashoffset: -134;
+  stroke-width: 6;
+}