From ca68267cbe4625c3a3a19df592230f7eaa525639 Mon Sep 17 00:00:00 2001
From: dev-phantom <godsfavour1975@gmail.com>
Date: Thu, 14 Sep 2023 18:02:12 +0100
Subject: [PATCH 1/5] fix:fix the toggle navbar

---
 components/sections/navigation/DropdownMenu.tsx | 17 ++++++++++++-----
 public/close_btn.svg                            |  3 +++
 2 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 public/close_btn.svg

diff --git a/components/sections/navigation/DropdownMenu.tsx b/components/sections/navigation/DropdownMenu.tsx
index e8368e330..ebc55d83d 100644
--- a/components/sections/navigation/DropdownMenu.tsx
+++ b/components/sections/navigation/DropdownMenu.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react'
 import Image from 'next/image'
 import { Menu, Transition } from '@headlessui/react'
 import Link from 'next/link'
 
 import SocialLinks from '../../common/SocialLinks'
 import MobileMenu from '../../../public/mobile_menu.svg'
+import MobileCloseMenu from '../../../public/close_btn.svg'
 
 interface MenuItem {
   label: string
@@ -18,15 +18,20 @@ interface DropdownMenuProps {
 }
 
 const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
+
+
   return (
-    <Menu as="div" className={` inline-block text-left ${className}`}>
+    <Menu as="div" className={`inline-block text-left ${className}`}>
+      {({ open }) => (
+        <>
+
       <div>
         <Menu.Button className="text-white" aria-label={label}>
-          <Image src={MobileMenu} alt="Menu" />
+          <Image src={open ? MobileCloseMenu : MobileMenu}  alt="Menu" />
         </Menu.Button>
       </div>
       <Transition
-        as={Fragment}
+        show={open}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
@@ -34,7 +39,7 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
+        <Menu.Items static className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
           <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
             MENU
           </p>
@@ -57,6 +62,8 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
           </div>
         </Menu.Items>
       </Transition>
+      </>
+      )}
     </Menu>
   )
 }
diff --git a/public/close_btn.svg b/public/close_btn.svg
new file mode 100644
index 000000000..a7b2ce574
--- /dev/null
+++ b/public/close_btn.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L16 16M1 16L16 1" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 04bbdffcbbcf56687188d74e1f7ef52677d09063 Mon Sep 17 00:00:00 2001
From: dev-phantom <godsfavour1975@gmail.com>
Date: Thu, 14 Sep 2023 18:13:05 +0100
Subject: [PATCH 2/5] test

---
 .../sections/navigation/DropdownMenu.tsx      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/sections/navigation/DropdownMenu.tsx b/components/sections/navigation/DropdownMenu.tsx
index ebc55d83d..0f841e3bd 100644
--- a/components/sections/navigation/DropdownMenu.tsx
+++ b/components/sections/navigation/DropdownMenu.tsx
@@ -1,3 +1,4 @@
+import { Fragment, useState } from 'react'
 import Image from 'next/image'
 import { Menu, Transition } from '@headlessui/react'
 import Link from 'next/link'
@@ -18,20 +19,22 @@ interface DropdownMenuProps {
 }
 
 const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
 
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
     <Menu as="div" className={`inline-block text-left ${className}`}>
-      {({ open }) => (
-        <>
-
       <div>
-        <Menu.Button className="text-white" aria-label={label}>
-          <Image src={open ? MobileCloseMenu : MobileMenu}  alt="Menu" />
+        <Menu.Button className="text-white" aria-label={label} onClick={toggleMenu}>
+          <Image src={isOpen ? MobileCloseMenu : MobileMenu} alt="Menu" />
         </Menu.Button>
       </div>
       <Transition
-        show={open}
+        as={Fragment}
+        show={isOpen}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
@@ -39,7 +42,8 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items static className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
+        {/* Place Menu.Items here */}
+        <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
           <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
             MENU
           </p>
@@ -62,8 +66,6 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
           </div>
         </Menu.Items>
       </Transition>
-      </>
-      )}
     </Menu>
   )
 }

From 96cd1fb837a99a6b268d15df3583e9635621b9a8 Mon Sep 17 00:00:00 2001
From: dev-phantom <godsfavour1975@gmail.com>
Date: Thu, 14 Sep 2023 18:16:36 +0100
Subject: [PATCH 3/5] retest

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

diff --git a/components/sections/navigation/DropdownMenu.tsx b/components/sections/navigation/DropdownMenu.tsx
index 0f841e3bd..924710538 100644
--- a/components/sections/navigation/DropdownMenu.tsx
+++ b/components/sections/navigation/DropdownMenu.tsx
@@ -27,8 +27,8 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
 
   return (
     <Menu as="div" className={`inline-block text-left ${className}`}>
-      <div>
-        <Menu.Button className="text-white" aria-label={label} onClick={toggleMenu}>
+      <div onClick={toggleMenu}>
+        <Menu.Button className="text-white" aria-label={label}>
           <Image src={isOpen ? MobileCloseMenu : MobileMenu} alt="Menu" />
         </Menu.Button>
       </div>

From b68dd26d2e27f651de2db6be6a2e439d1f527609 Mon Sep 17 00:00:00 2001
From: dev-phantom <godsfavour1975@gmail.com>
Date: Thu, 14 Sep 2023 18:26:12 +0100
Subject: [PATCH 4/5] test 3

---
 .../sections/navigation/DropdownMenu.tsx      | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/components/sections/navigation/DropdownMenu.tsx b/components/sections/navigation/DropdownMenu.tsx
index 924710538..8286c9de6 100644
--- a/components/sections/navigation/DropdownMenu.tsx
+++ b/components/sections/navigation/DropdownMenu.tsx
@@ -1,21 +1,21 @@
-import { Fragment, useState } from 'react'
-import Image from 'next/image'
-import { Menu, Transition } from '@headlessui/react'
-import Link from 'next/link'
+import { Fragment, useState } from 'react';
+import Image from 'next/image';
+import { Menu, Transition } from '@headlessui/react';
+import Link from 'next/link';
 
-import SocialLinks from '../../common/SocialLinks'
-import MobileMenu from '../../../public/mobile_menu.svg'
-import MobileCloseMenu from '../../../public/close_btn.svg'
+import SocialLinks from '../../common/SocialLinks';
+import MobileMenu from '../../../public/mobile_menu.svg';
+import MobileCloseMenu from '../../../public/close_btn.svg';
 
 interface MenuItem {
-  label: string
-  href: string
+  label: string;
+  href: string;
 }
 
 interface DropdownMenuProps {
-  menuItems: MenuItem[]
-  className?: string
-  label: string
+  menuItems: MenuItem[];
+  className?: string;
+  label: string;
 }
 
 const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
@@ -42,32 +42,33 @@ const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        {/* Place Menu.Items here */}
-        <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
-          <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
-            MENU
-          </p>
-          <div className="flex flex-col gap-y-8 pb-14">
-            {menuItems.map(({ label, href }) => (
-              <Menu.Item key={label}>
-                <Link href={href} passHref>
-                  <span className="font-bold text-textPrimary text-lg">
-                    {label}
-                  </span>
-                </Link>
-              </Menu.Item>
-            ))}
-          </div>
-          <div>
-            <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-10">
-              SOCIALS
+        {(isOpen) && (
+          <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
+            <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
+              MENU
             </p>
-            <SocialLinks />
-          </div>
-        </Menu.Items>
+            <div className="flex flex-col gap-y-8 pb-14">
+              {menuItems.map(({ label, href }) => (
+                <Menu.Item key={label}>
+                  <Link href={href} passHref>
+                    <span className="font-bold text-textPrimary text-lg">
+                      {label}
+                    </span>
+                  </Link>
+                </Menu.Item>
+              ))}
+            </div>
+            <div>
+              <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-10">
+                SOCIALS
+              </p>
+              <SocialLinks />
+            </div>
+          </Menu.Items>
+        )}
       </Transition>
     </Menu>
-  )
-}
+  );
+};
 
-export default DropdownMenu
+export default DropdownMenu;

From 7ef06f45fe5bdb18bf08a32fcc114df946098d1b Mon Sep 17 00:00:00 2001
From: dev-phantom <godsfavour1975@gmail.com>
Date: Thu, 14 Sep 2023 18:31:50 +0100
Subject: [PATCH 5/5] test 4

---
 .../sections/navigation/DropdownMenu.tsx      | 88 +++++++++----------
 1 file changed, 42 insertions(+), 46 deletions(-)

diff --git a/components/sections/navigation/DropdownMenu.tsx b/components/sections/navigation/DropdownMenu.tsx
index 8286c9de6..7003d3787 100644
--- a/components/sections/navigation/DropdownMenu.tsx
+++ b/components/sections/navigation/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';
 import Image from 'next/image';
 import { Menu, Transition } from '@headlessui/react';
 import Link from 'next/link';
@@ -19,54 +19,50 @@ interface DropdownMenuProps {
 }
 
 const DropdownMenu = ({ menuItems, className, label }: DropdownMenuProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-
   return (
     <Menu as="div" className={`inline-block text-left ${className}`}>
-      <div onClick={toggleMenu}>
-        <Menu.Button className="text-white" aria-label={label}>
-          <Image src={isOpen ? MobileCloseMenu : MobileMenu} alt="Menu" />
-        </Menu.Button>
-      </div>
-      <Transition
-        as={Fragment}
-        show={isOpen}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        {(isOpen) && (
-          <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
-            <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
-              MENU
-            </p>
-            <div className="flex flex-col gap-y-8 pb-14">
-              {menuItems.map(({ label, href }) => (
-                <Menu.Item key={label}>
-                  <Link href={href} passHref>
-                    <span className="font-bold text-textPrimary text-lg">
-                      {label}
-                    </span>
-                  </Link>
-                </Menu.Item>
-              ))}
-            </div>
-            <div>
-              <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-10">
-                SOCIALS
+      {({ open }) => (
+        <>
+          
+            <Menu.Button className="text-white" aria-label={label}>
+              <Image src={open ? MobileCloseMenu : MobileMenu} alt="Menu" />
+            </Menu.Button>
+            
+          <Transition
+            as={Fragment}
+            show={open}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute z-50 h-fit min-h-[470px] right-6 left-6 mt-6 bg-gradient-to-r from-[#ED5432] to-[#EDA232] py-9 px-7 rounded-lg">
+              <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-8">
+                MENU
               </p>
-              <SocialLinks />
-            </div>
-          </Menu.Items>
-        )}
-      </Transition>
+              <div className="flex flex-col gap-y-8 pb-14">
+                {menuItems.map(({ label, href }) => (
+                  <Menu.Item key={label}>
+                    <Link href={href} passHref>
+                      <span className="font-bold text-textPrimary text-lg">
+                        {label}
+                      </span>
+                    </Link>
+                  </Menu.Item>
+                ))}
+              </div>
+              <div>
+                <p className="font-bold text-textPrimary text-xs opacity-70 tracking-[0.2em] pb-10">
+                  SOCIALS
+                </p>
+                <SocialLinks />
+              </div>
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
     </Menu>
   );
 };