From ac3b71ffe67654ed77b37efc20c7f52eb7c01702 Mon Sep 17 00:00:00 2001
From: jvarCS <vargassegoviano@gmail.com>
Date: Thu, 12 Oct 2023 23:32:54 -0700
Subject: [PATCH 1/4] navbar add

---
 src/components/Navigation.jsx | 79 ++++++++++++++++++++++++++++++++++-
 src/data/navigation.js        | 18 ++++++++
 2 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/data/navigation.js

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 3252523..20a0907 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -1,5 +1,82 @@
+"use client";
+import Navbar from "react-bootstrap/Navbar";
+import React from "react";
+import blueLogo from "../../public/assets/blueLogo.svg";
+import Link from "next/link";
+import Image from "next/image";
+import { items } from "../data/navigation";
+import Nav from "react-bootstrap/Nav";
+import { useState } from "react";
+import { NavDropdown } from "react-bootstrap";
+
 const Navigation = () => {
-  return <div>Navigation</div>;
+  const [selected, setSelected] = useState("");
+  return (
+    <Navbar // Removed fixed="top"
+      collapseOnSelect
+      expand="md"
+      fixed="top"
+      className="w-full md:h-[8vh] flex pb-10 font-playfair !bg-slate-400 justify-between items-center"
+    >
+      <Link href="/" className="items-center ml-3">
+        <Image src={blueLogo} />
+      </Link>
+
+      <Navbar.Collapse className="items-center mr-12 md:justify-end justify-center">
+        <Nav className="mb-2 w-12/12 no-underline text-2xl flex items-center">
+          {items.map((item, index) => (
+            <Nav.Link
+              as={Link}
+              key={index}
+              href={item.link}
+              onClick={() => setSelected(item.name)} // Blue border when selected became squared immediately after selecting something else so applied rounded-full
+              className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                selected === item.name &&
+                "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
+              }`}
+            >
+              {item.name === "PROJECTS" ? (
+                <NavDropdown title={item.name}>
+                  <NavDropdown.Item
+                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                    href="#"
+                  >
+                    Costa Rica
+                  </NavDropdown.Item>
+                  <NavDropdown.Item
+                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                    href="#"
+                  >
+                    Tanzania
+                  </NavDropdown.Item>
+                  <NavDropdown.Item
+                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                    href="#"
+                  >
+                    Water Quality and Filtration
+                  </NavDropdown.Item>
+                  <NavDropdown.Item
+                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                    href="#"
+                  >
+                    Robotics
+                  </NavDropdown.Item>
+                  <NavDropdown.Item
+                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                    href="#"
+                  >
+                    Air Quality System
+                  </NavDropdown.Item>
+                </NavDropdown>
+              ) : (
+                item.name
+              )}
+            </Nav.Link>
+          ))}
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
 };
 
 export default Navigation;
diff --git a/src/data/navigation.js b/src/data/navigation.js
new file mode 100644
index 0000000..170a1a3
--- /dev/null
+++ b/src/data/navigation.js
@@ -0,0 +1,18 @@
+export const items = [
+  {
+    name: "ABOUT",
+    link: "about",
+  },
+  {
+    name: "PROJECTS",
+    link: "projects",
+  },
+  {
+    name: "EVENTS",
+    link: "events",
+  },
+  {
+    name: "BOARD",
+    link: "board",
+  },
+];

From 82a8d97ead16a6d2a35cd06c6b95a34f74889ec2 Mon Sep 17 00:00:00 2001
From: jvarCS <vargassegoviano@gmail.com>
Date: Fri, 13 Oct 2023 01:24:52 -0700
Subject: [PATCH 2/4] navbar fix

---
 src/components/Navigation.jsx | 44 +++++++++++++++++++++++------------
 src/data/navigation.js        |  4 ++++
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 20a0907..986d0fa 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -16,7 +16,7 @@ const Navigation = () => {
       collapseOnSelect
       expand="md"
       fixed="top"
-      className="w-full md:h-[8vh] flex pb-10 font-playfair !bg-slate-400 justify-between items-center"
+      className="w-full md:h-[8vh] flex pb-10 font-playfair !bg-white justify-between items-center"
     >
       <Link href="/" className="items-center ml-3">
         <Image src={blueLogo} />
@@ -25,18 +25,21 @@ const Navigation = () => {
       <Navbar.Collapse className="items-center mr-12 md:justify-end justify-center">
         <Nav className="mb-2 w-12/12 no-underline text-2xl flex items-center">
           {items.map((item, index) => (
-            <Nav.Link
-              as={Link}
-              key={index}
-              href={item.link}
-              onClick={() => setSelected(item.name)} // Blue border when selected became squared immediately after selecting something else so applied rounded-full
-              className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
-                selected === item.name &&
-                "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
-              }`}
-            >
-              {item.name === "PROJECTS" ? (
-                <NavDropdown title={item.name}>
+            <div key={index}>
+              {item.drop ? (
+                <NavDropdown
+                  onClick={() => setSelected(item.name)}
+                  title={
+                    <span
+                      className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                        selected === "PROJECTS" &&
+                        "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
+                      }`}
+                    >
+                      {item.name}
+                    </span>
+                  }
+                >
                   <NavDropdown.Item
                     className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
                     href="#"
@@ -69,9 +72,20 @@ const Navigation = () => {
                   </NavDropdown.Item>
                 </NavDropdown>
               ) : (
-                item.name
+                <Nav.Link
+                  as={Link}
+                  key={index}
+                  href={item.link}
+                  onClick={() => setSelected(item.name)} // Blue border when selected became squared immediately after selecting something else so applied rounded-full
+                  className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                    selected === item.name &&
+                    "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
+                  }`}
+                >
+                  {item.name}
+                </Nav.Link>
               )}
-            </Nav.Link>
+            </div>
           ))}
         </Nav>
       </Navbar.Collapse>
diff --git a/src/data/navigation.js b/src/data/navigation.js
index 170a1a3..06ccdd0 100644
--- a/src/data/navigation.js
+++ b/src/data/navigation.js
@@ -2,17 +2,21 @@ export const items = [
   {
     name: "ABOUT",
     link: "about",
+    drop: false,
   },
   {
     name: "PROJECTS",
     link: "projects",
+    drop: true,
   },
   {
     name: "EVENTS",
     link: "events",
+    drop: false,
   },
   {
     name: "BOARD",
     link: "board",
+    drop: false,
   },
 ];

From 0480562f38e24bb41af2da8f49b44806f822a608 Mon Sep 17 00:00:00 2001
From: jvarCS <vargassegoviano@gmail.com>
Date: Wed, 18 Oct 2023 15:48:54 -0700
Subject: [PATCH 3/4] Added changes

---
 src/components/Navigation.jsx | 45 ++++++++++-------------------------
 1 file changed, 12 insertions(+), 33 deletions(-)

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index a2222c7..9b28976 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -33,53 +33,32 @@ const Navigation = () => {
                     <span
                       className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
                         selected === "PROJECTS" &&
-                        "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
+                        "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
                       }`}
                     >
                       {item.name}
                     </span>
                   }
                 >
-                  <NavDropdown.Item
-                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                    href="#"
-                  >
-                    Costa Rica
-                  </NavDropdown.Item>
-                  <NavDropdown.Item
-                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                    href="#"
-                  >
-                    Tanzania
-                  </NavDropdown.Item>
-                  <NavDropdown.Item
-                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                    href="#"
-                  >
-                    Water Quality and Filtration
-                  </NavDropdown.Item>
-                  <NavDropdown.Item
-                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                    href="#"
-                  >
-                    Robotics
-                  </NavDropdown.Item>
-                  <NavDropdown.Item
-                    className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                    href="#"
-                  >
-                    Air Quality System
-                  </NavDropdown.Item>
+                  {item.sub.map((country, index) => (
+                    <NavDropdown.Item
+                      key={index}
+                      className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
+                      href={country.link}
+                    >
+                      {country.name}
+                    </NavDropdown.Item>
+                  ))}
                 </NavDropdown>
               ) : (
                 <Nav.Link
                   as={Link}
                   key={index}
                   href={item.link}
-                  onClick={() => setSelected(item.name)} // Blue border when selected became squared immediately after selecting something else so applied rounded-full
+                  onClick={() => setSelected(item.name)}
                   className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
                     selected === item.name &&
-                    "!bg-ewb-blue-200 rounded-full text-white hover:!text-white" // To remove blue hover i set new hover to white
+                    "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
                   }`}
                 >
                   {item.name}

From 10183a640281d25aadf2b5254707dbdd8b9662a9 Mon Sep 17 00:00:00 2001
From: menthy-wu <wumengxuan0728@gmail.com>
Date: Wed, 18 Oct 2023 17:42:50 -0700
Subject: [PATCH 4/4] fix dropdown

---
 src/app/layout.js             |  2 +-
 src/components/Navigation.jsx | 39 +++++++++++++++++++++++------------
 src/data/navigation.js        | 18 ++++++++--------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/app/layout.js b/src/app/layout.js
index b2653d0..780cb2c 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -17,7 +17,7 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body className={urbanist.className}>
         <Navigation />
-        <div className="w-full flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center mt-16 md:mt-[8vh]">
           {children}
         </div>
         <Footer />
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 9b28976..aa5dba0 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -1,6 +1,5 @@
 "use client";
 import Navbar from "react-bootstrap/Navbar";
-import React from "react";
 import blueLogo from "../../public/assets/blueLogo.svg";
 import Link from "next/link";
 import Image from "next/image";
@@ -8,31 +7,45 @@ import { navigation } from "../data/navigation";
 import Nav from "react-bootstrap/Nav";
 import { useState } from "react";
 import { NavDropdown } from "react-bootstrap";
+import { FaBars } from "react-icons/fa";
 
 const Navigation = () => {
   const [selected, setSelected] = useState("");
+
   return (
     <Navbar
       collapseOnSelect
       expand="md"
       fixed="top"
-      className="w-full md:h-[8vh] flex pb-10 font-playfair !bg-white justify-between items-center"
+      className="w-full h-16 md:h-[8vh] flex pb-10 font-playfair !bg-white justify-between items-center"
     >
-      <Link href="/" className="items-center ml-3">
-        <Image src={blueLogo} />
-      </Link>
-
-      <Navbar.Collapse className="items-center mr-12 md:justify-end justify-center">
-        <Nav className="mb-2 w-12/12 no-underline text-2xl flex items-center">
+      <Navbar.Brand className="p-0 h-full">
+        <Link
+          onClick={() => setSelected("")}
+          href="/"
+          className="items-center flex ml-3 h-full"
+        >
+          <Image src={blueLogo} className="h-full" />
+        </Link>
+      </Navbar.Brand>
+      <Navbar.Toggle
+        className="list-unstyled !text-transparent border-0"
+        aria-controls="basic-navbar-nav"
+      >
+        <FaBars className="text-ewb-blue-200 text-xl" />
+      </Navbar.Toggle>
+      <Navbar.Collapse className="items-center md:justify-end justify-center">
+        <Nav className="mb-2 no-underline text-lg flex items-center gap-2 mr-4">
           {navigation.map((item, index) => (
             <div key={index}>
               {item.sub.length > 0 ? (
                 <NavDropdown
                   onClick={() => setSelected(item.name)}
+                  className="[&>*]:!border-0 [&>*]:!p-0 [&>*]:!m-0 [&>*]:!bg-transparent"
                   title={
                     <span
-                      className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
-                        selected === "PROJECTS" &&
+                      className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-lg whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                        selected === item.name &&
                         "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
                       }`}
                     >
@@ -43,8 +56,8 @@ const Navigation = () => {
                   {item.sub.map((country, index) => (
                     <NavDropdown.Item
                       key={index}
-                      className="text-white hover:!bg-ewb-green !bg-ewb-blue-200"
-                      href={country.link}
+                      className="text-white hover:!bg-ewb-green !bg-ewb-blue-200 first:!mt-5"
+                      href={"/projects" + country.link}
                     >
                       {country.name}
                     </NavDropdown.Item>
@@ -56,7 +69,7 @@ const Navigation = () => {
                   key={index}
                   href={item.link}
                   onClick={() => setSelected(item.name)}
-                  className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-2xl whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                  className={`hover:cursor-pointer rounded-full mb-0 py-0 px-4 no-underline !text-black text-lg whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
                     selected === item.name &&
                     "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
                   }`}
diff --git a/src/data/navigation.js b/src/data/navigation.js
index ac8fbcc..6f4313f 100644
--- a/src/data/navigation.js
+++ b/src/data/navigation.js
@@ -1,31 +1,31 @@
 export const navigation = [
   {
     name: "ABOUT",
-    link: "about",
+    link: "/about",
     sub: [],
   },
   {
     name: "PROJECTS",
-    link: "projects",
+    link: "/projects",
     sub: [
-      { name: "Costa Rica", link: "costa-rica" },
-      { name: "Tanzania", link: "tanzania" },
+      { name: "Costa Rica", link: "/costa-rica" },
+      { name: "Tanzania", link: "/tanzania" },
       {
         name: "Water Quality and Filtration",
-        link: "water-quality-and-filtration",
+        link: "/water-quality-and-filtration",
       },
-      { name: "Robotics", link: "robotics" },
-      { name: "Air Quality System", link: "air-quality-system" },
+      { name: "Robotics", link: "/robotics" },
+      { name: "Air Quality System", link: "/air-quality-system" },
     ],
   },
   {
     name: "EVENTS",
-    link: "events",
+    link: "/events",
     sub: [],
   },
   {
     name: "BOARD",
-    link: "board",
+    link: "/board",
     sub: [],
   },
 ];