From a1cf6fe6356d7822fd9c53cc301c18c1b7c97c87 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sat, 11 Nov 2023 22:54:00 +0100
Subject: [PATCH 1/5] feat: submenu dropdown

---
 components/UI/desktopNav.tsx            | 64 +++++++++++++++++++++++++
 components/UI/navbar.tsx                | 54 ++++++++++++++++++++-
 styles/components/desktopNav.module.css | 58 ++++++++++++++++++++++
 styles/components/navbar.module.css     | 22 +++++++++
 styles/globals.css                      |  2 +
 5 files changed, 198 insertions(+), 2 deletions(-)
 create mode 100644 components/UI/desktopNav.tsx
 create mode 100644 styles/components/desktopNav.module.css

diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
new file mode 100644
index 00000000..e4d0f600
--- /dev/null
+++ b/components/UI/desktopNav.tsx
@@ -0,0 +1,64 @@
+import { FunctionComponent, MouseEvent } from "react";
+import styles from "../../styles/components/desktopNav.module.css";
+import Link from "next/link";
+import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
+import theme from "../../styles/theme";
+
+const DesktopNav: FunctionComponent = () => {
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <nav onClick={handleClick} className={styles.navContainer}>
+      <div className={styles.columns}>
+        <div className={styles.column}>
+          <Link href="/offers">
+            <li className={styles.burgerItem}>My offers</li>
+          </Link>
+          <Link href={process.env.NEXT_PUBLIC_STARKNET_ID as string}>
+            <li className={styles.burgerItem}>Website</li>
+          </Link>
+          <Link href="https://www.starknet.id/pdfs/Terms.pdf">
+            <li className={styles.burgerItem}>Term of use</li>
+          </Link>
+        </div>
+        <div className={styles.column}>
+          <Link href="https://docs.starknet.id/">
+            <li className={styles.burgerItem}>Documentation</li>
+          </Link>
+          <Link
+            href={`${
+              process.env.NEXT_PUBLIC_STARKNET_ID as string
+            }/affiliates/individual-program`}
+          >
+            <li className={styles.burgerItem}>Affiliation</li>
+          </Link>
+          <Link href="https://starknet.id/pdfs/PrivacyPolicy.pdf">
+            <li className={styles.burgerItem}>Privacy policy</li>
+          </Link>
+        </div>
+      </div>
+      <hr className={styles.hr} />
+      <div className={styles.socials}>
+        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
+          <Link href="https://twitter.com/Starknet_id">
+            <FaTwitter size={24} color={theme.palette.secondary.main} />
+          </Link>
+        </div>
+        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
+          <Link href="https://discord.com/invite/8uS2Mgcsza">
+            <FaDiscord size={24} color={theme.palette.secondary.main} />
+          </Link>
+        </div>
+        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
+          <Link href="https://github.com/starknet-id">
+            <FaGithub size={24} color={theme.palette.secondary.main} />
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default DesktopNav;
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index f25ed9ea..8abb0f6c 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
-import { FaDiscord, FaTwitter } from "react-icons/fa";
+import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import styles from "../../styles/components/navbar.module.css";
 import Button from "./button";
 import {
@@ -24,6 +24,7 @@ import ModalWallet from "./modalWallet";
 import { constants } from "starknet";
 import { useTheme } from "@mui/material/styles";
 import ProfilFilledIcon from "./iconsComponents/icons/profilFilledIcon";
+import DesktopNav from "./desktopNav";
 
 const Navbar: FunctionComponent = () => {
   const theme = useTheme();
@@ -144,6 +145,14 @@ const Navbar: FunctionComponent = () => {
               {/* <Link href="/jointhetribe">
                 <li className={styles.menuItem}>Join the tribe</li>
               </Link> */}
+              <div
+                onClick={handleNav}
+                className={styles.menuBurger}
+                aria-expanded={nav}
+              >
+                <AiOutlineMenu color={theme.palette.secondary.main} size={25} />
+                {nav ? <DesktopNav /> : null}
+              </div>
               <div className="text-beige mx-5">
                 <Button
                   onClick={
@@ -200,7 +209,7 @@ const Navbar: FunctionComponent = () => {
           <div
             className={
               nav
-                ? "fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in duration-500 flex justify-between flex-col"
+                ? "fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in duration-500 flex justify-between flex-col overflow-auto"
                 : "fixed left-[-100%] top-0 p-10 ease-in h-screen flex justify-between flex-col"
             }
           >
@@ -247,6 +256,42 @@ const Navbar: FunctionComponent = () => {
                         Domains
                       </li>
                     </Link>
+                    <Link href="/offers">
+                      <li
+                        onClick={() => setNav(false)}
+                        className={styles.menuItemSmall}
+                      >
+                        My Offers
+                      </li>
+                    </Link>
+                    <Link href={process.env.NEXT_PUBLIC_STARKNET_ID as string}>
+                      <li
+                        onClick={() => setNav(false)}
+                        className={styles.menuItemSmall}
+                      >
+                        Website
+                      </li>
+                    </Link>
+                    <Link href="https://docs.starknet.id/">
+                      <li
+                        onClick={() => setNav(false)}
+                        className={styles.menuItemSmall}
+                      >
+                        Documentation
+                      </li>
+                    </Link>
+                    <Link
+                      href={`${
+                        process.env.NEXT_PUBLIC_STARKNET_ID as string
+                      }/affiliates/individual-program`}
+                    >
+                      <li
+                        onClick={() => setNav(false)}
+                        className={styles.menuItemSmall}
+                      >
+                        Affiliation
+                      </li>
+                    </Link>
                   </ul>
                 </div>
               </div>
@@ -267,6 +312,11 @@ const Navbar: FunctionComponent = () => {
                     <FaDiscord size={28} color={theme.palette.secondary.main} />
                   </Link>
                 </div>
+                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                  <Link href="https://github.com/starknet-id">
+                    <FaGithub size={28} color={theme.palette.secondary.main} />
+                  </Link>
+                </div>
               </div>
             </div>
           </div>
diff --git a/styles/components/desktopNav.module.css b/styles/components/desktopNav.module.css
new file mode 100644
index 00000000..743fcc39
--- /dev/null
+++ b/styles/components/desktopNav.module.css
@@ -0,0 +1,58 @@
+.navContainer {
+  position: absolute;
+  justify-content: space-between;
+  background-color: #fff;
+  right: 0;
+  top: 38px;
+  border-radius: 8px;
+  border: 1px solid var(--light-tertiary-300, #f5f0eb);
+  background: var(--background-light, #fffcf8);
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 312px;
+  cursor: default;
+}
+
+.columns {
+  display: flex;
+  width: 100%;
+}
+
+.column {
+  width: 50%;
+}
+
+.burgerItem {
+  text-transform: none;
+  color: var(--dark-content, #454545);
+  /* Body/default/medium */
+  font-family: Poppins-Regular;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 125% */
+  display: flex;
+  padding: 16px;
+  gap: 10px;
+}
+
+.burgerItem:hover {
+  background-color: var(--light-tertiary);
+}
+
+.hr {
+  width: 100%;
+  height: 1px;
+  background-color: var(--light-tertiary);
+}
+
+.socials {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
diff --git a/styles/components/navbar.module.css b/styles/components/navbar.module.css
index b9fedb88..529d83ff 100644
--- a/styles/components/navbar.module.css
+++ b/styles/components/navbar.module.css
@@ -8,6 +8,28 @@
   color: var(--secondary);
   text-transform: underline;
   transition: 0.3s ease-in-out;
+  position: relative;
+}
+
+.menuBurger {
+  margin-left: 2.5rem /* 40px */;
+  cursor: pointer;
+  position: relative;
+}
+
+.menuBurger[aria-expanded="true"]::before,
+.menuBurger:hover::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  z-index: -1;
+  border-radius: 100px;
+  background: var(--light-tertiary);
 }
 
 .menuItem:hover {
diff --git a/styles/globals.css b/styles/globals.css
index a61206e8..4d935c7c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -23,8 +23,10 @@
   --secondary: #402d28;
   --secondary300: #eae0d5;
   --tertiary: #bf9e7b;
+  --light-tertiary: #f5f0eb;
   --background: #fff9f0;
   --background-light: #fffcf8;
+  --dark-content: #454545;
   --nimiq-ease: cubic-bezier(0.25, 0, 0, 1);
   --small-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
   --large-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);

From 3e6acc65526b917518359572375c8f26a4642db7 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sat, 11 Nov 2023 22:55:31 +0100
Subject: [PATCH 2/5] fixing build error

---
 components/UI/desktopNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
index e4d0f600..3a62c87b 100644
--- a/components/UI/desktopNav.tsx
+++ b/components/UI/desktopNav.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, MouseEvent } from "react";
+import React, { FunctionComponent, MouseEvent } from "react";
 import styles from "../../styles/components/desktopNav.module.css";
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";

From 99c2e4e3bdbc74f2c6db060e203d9bdb72320f95 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sun, 12 Nov 2023 11:08:58 +0100
Subject: [PATCH 3/5] Removing "My offers"

---
 components/UI/desktopNav.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
index 3a62c87b..cd0731cc 100644
--- a/components/UI/desktopNav.tsx
+++ b/components/UI/desktopNav.tsx
@@ -13,20 +13,17 @@ const DesktopNav: FunctionComponent = () => {
     <nav onClick={handleClick} className={styles.navContainer}>
       <div className={styles.columns}>
         <div className={styles.column}>
-          <Link href="/offers">
-            <li className={styles.burgerItem}>My offers</li>
-          </Link>
           <Link href={process.env.NEXT_PUBLIC_STARKNET_ID as string}>
             <li className={styles.burgerItem}>Website</li>
           </Link>
           <Link href="https://www.starknet.id/pdfs/Terms.pdf">
             <li className={styles.burgerItem}>Term of use</li>
           </Link>
-        </div>
-        <div className={styles.column}>
           <Link href="https://docs.starknet.id/">
             <li className={styles.burgerItem}>Documentation</li>
           </Link>
+        </div>
+        <div className={styles.column}>
           <Link
             href={`${
               process.env.NEXT_PUBLIC_STARKNET_ID as string

From 37a129a44e9d761e216a7395e22104f5444d6e95 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sun, 12 Nov 2023 15:27:40 +0100
Subject: [PATCH 4/5] improvements

---
 components/UI/desktopNav.tsx | 46 ++++++++++++++++++++++++++++--------
 components/UI/navbar.tsx     | 28 +++++++++++-----------
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
index cd0731cc..5ee3c016 100644
--- a/components/UI/desktopNav.tsx
+++ b/components/UI/desktopNav.tsx
@@ -1,25 +1,47 @@
-import React, { FunctionComponent, MouseEvent } from "react";
+import React, { FunctionComponent, MouseEvent, useEffect, useRef } from "react";
 import styles from "../../styles/components/desktopNav.module.css";
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import theme from "../../styles/theme";
 
-const DesktopNav: FunctionComponent = () => {
+type DesktopNavProps = {
+  close: () => void;
+};
+
+const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
+  const ref = useRef<HTMLDivElement>(null);
   const handleClick = (e: MouseEvent) => {
     e.stopPropagation();
   };
 
+  // Close when clicking outside the nav
+  useEffect(() => {
+    const handleClickOutside: EventListener = (e) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        close();
+      }
+    };
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
   return (
-    <nav onClick={handleClick} className={styles.navContainer}>
+    <nav onClick={handleClick} className={styles.navContainer} ref={ref}>
       <div className={styles.columns}>
         <div className={styles.column}>
-          <Link href={process.env.NEXT_PUBLIC_STARKNET_ID as string}>
+          <Link
+            href={process.env.NEXT_PUBLIC_STARKNET_ID as string}
+            target="_blank"
+          >
             <li className={styles.burgerItem}>Website</li>
           </Link>
-          <Link href="https://www.starknet.id/pdfs/Terms.pdf">
+          <Link href="https://www.starknet.id/pdfs/Terms.pdf" target="_blank">
             <li className={styles.burgerItem}>Term of use</li>
           </Link>
-          <Link href="https://docs.starknet.id/">
+          <Link href="https://docs.starknet.id/" target="_blank">
             <li className={styles.burgerItem}>Documentation</li>
           </Link>
         </div>
@@ -28,10 +50,14 @@ const DesktopNav: FunctionComponent = () => {
             href={`${
               process.env.NEXT_PUBLIC_STARKNET_ID as string
             }/affiliates/individual-program`}
+            target="_blank"
           >
             <li className={styles.burgerItem}>Affiliation</li>
           </Link>
-          <Link href="https://starknet.id/pdfs/PrivacyPolicy.pdf">
+          <Link
+            href="https://starknet.id/pdfs/PrivacyPolicy.pdf"
+            target="_blank"
+          >
             <li className={styles.burgerItem}>Privacy policy</li>
           </Link>
         </div>
@@ -39,17 +65,17 @@ const DesktopNav: FunctionComponent = () => {
       <hr className={styles.hr} />
       <div className={styles.socials}>
         <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-          <Link href="https://twitter.com/Starknet_id">
+          <Link href="https://twitter.com/Starknet_id" target="_blank">
             <FaTwitter size={24} color={theme.palette.secondary.main} />
           </Link>
         </div>
         <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-          <Link href="https://discord.com/invite/8uS2Mgcsza">
+          <Link href="https://discord.com/invite/8uS2Mgcsza" target="_blank">
             <FaDiscord size={24} color={theme.palette.secondary.main} />
           </Link>
         </div>
         <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-          <Link href="https://github.com/starknet-id">
+          <Link href="https://github.com/starknet-id" target="_blank">
             <FaGithub size={24} color={theme.palette.secondary.main} />
           </Link>
         </div>
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index 8abb0f6c..c7afb2e9 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -149,9 +149,10 @@ const Navbar: FunctionComponent = () => {
                 onClick={handleNav}
                 className={styles.menuBurger}
                 aria-expanded={nav}
+                id="burger"
               >
                 <AiOutlineMenu color={theme.palette.secondary.main} size={25} />
-                {nav ? <DesktopNav /> : null}
+                {nav ? <DesktopNav close={handleNav} /> : null}
               </div>
               <div className="text-beige mx-5">
                 <Button
@@ -256,15 +257,10 @@ const Navbar: FunctionComponent = () => {
                         Domains
                       </li>
                     </Link>
-                    <Link href="/offers">
-                      <li
-                        onClick={() => setNav(false)}
-                        className={styles.menuItemSmall}
-                      >
-                        My Offers
-                      </li>
-                    </Link>
-                    <Link href={process.env.NEXT_PUBLIC_STARKNET_ID as string}>
+                    <Link
+                      href={process.env.NEXT_PUBLIC_STARKNET_ID as string}
+                      target="_blank"
+                    >
                       <li
                         onClick={() => setNav(false)}
                         className={styles.menuItemSmall}
@@ -272,7 +268,7 @@ const Navbar: FunctionComponent = () => {
                         Website
                       </li>
                     </Link>
-                    <Link href="https://docs.starknet.id/">
+                    <Link href="https://docs.starknet.id/" target="_blank">
                       <li
                         onClick={() => setNav(false)}
                         className={styles.menuItemSmall}
@@ -284,6 +280,7 @@ const Navbar: FunctionComponent = () => {
                       href={`${
                         process.env.NEXT_PUBLIC_STARKNET_ID as string
                       }/affiliates/individual-program`}
+                      target="_blank"
                     >
                       <li
                         onClick={() => setNav(false)}
@@ -303,17 +300,20 @@ const Navbar: FunctionComponent = () => {
               </div>
               <div className="flex">
                 <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
-                  <Link href="https://twitter.com/Starknet_id">
+                  <Link href="https://twitter.com/Starknet_id" target="_blank">
                     <FaTwitter size={28} color={theme.palette.secondary.main} />
                   </Link>
                 </div>
                 <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
-                  <Link href="https://discord.com/invite/8uS2Mgcsza">
+                  <Link
+                    href="https://discord.com/invite/8uS2Mgcsza"
+                    target="_blank"
+                  >
                     <FaDiscord size={28} color={theme.palette.secondary.main} />
                   </Link>
                 </div>
                 <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
-                  <Link href="https://github.com/starknet-id">
+                  <Link href="https://github.com/starknet-id" target="_blank">
                     <FaGithub size={28} color={theme.palette.secondary.main} />
                   </Link>
                 </div>

From 23efb7e0740ac45af84b9032d48a130110304128 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Tue, 14 Nov 2023 20:58:25 +0100
Subject: [PATCH 5/5] fixing blinking menu bug

---
 components/UI/desktopNav.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
index 5ee3c016..a71a52cc 100644
--- a/components/UI/desktopNav.tsx
+++ b/components/UI/desktopNav.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, MouseEvent, useEffect, useRef } from "react";
+import React, { FunctionComponent, MouseEvent, useEffect } from "react";
 import styles from "../../styles/components/desktopNav.module.css";
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
@@ -9,7 +9,6 @@ type DesktopNavProps = {
 };
 
 const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
-  const ref = useRef<HTMLDivElement>(null);
   const handleClick = (e: MouseEvent) => {
     e.stopPropagation();
   };
@@ -17,7 +16,8 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
   // Close when clicking outside the nav
   useEffect(() => {
     const handleClickOutside: EventListener = (e) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      const burger = document.getElementById("burger");
+      if (burger && !burger.contains(e.target as Node)) {
         close();
       }
     };
@@ -27,9 +27,10 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
       // Unbind the event listener on clean up
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [ref]);
+  }, []);
+
   return (
-    <nav onClick={handleClick} className={styles.navContainer} ref={ref}>
+    <nav onClick={handleClick} className={styles.navContainer}>
       <div className={styles.columns}>
         <div className={styles.column}>
           <Link