Merge pull request #32 from open-source-labs/NavBarReDesign

Redesigned NavBar merged!

components/Header.tsx

@@ -0,0 +1,145 @@
+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(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        // Tailwind's md breakpoint
+        setIsMenuOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    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={`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}
+          >
+            <svg width="35" height="35" viewBox="0 0 100 100">
+              <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 */}
+
+        {isMenuOpen && (
+          <>
+            <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">
+                  {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"
+                    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>
+    </>
+  );
+}

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>

pages/_app.tsx

@@ -2,14 +2,16 @@ 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 (
     <>
       <Head>
         <title>SeeQR</title>
       </Head>
-      <Component {...pageProps} />
+      <Header />
+      <Component {...pageProps} id = "grayModal"/>
     </>
   );
 }

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"

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 />
     </>

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;
+export default TeamPage;

styles/globals.css

@@ -25,3 +25,158 @@ body {
     )
     rgb(var(--background-start-rgb));
 } */
+
+@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;
+}
+
+
+
+.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;
+}