From c358c11a2bb7c89dd1d4fc028aa2b1ad377c75e8 Mon Sep 17 00:00:00 2001
From: Peace Oloruntoba <116691242+PeaceOloruntoba@users.noreply.github.com>
Date: Wed, 21 Jun 2023 19:44:08 +0100
Subject: [PATCH 1/3] Update SubMenu.js

I think this should solve the issue of transparent navbar, and also don't forget to adjust the text-red-500 to the desired color, maybe light green 'text-green-200' or something
---
 src/pages/components/Navbar/SubMenu.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/pages/components/Navbar/SubMenu.js b/src/pages/components/Navbar/SubMenu.js
index 513a0c74..3b81eb87 100644
--- a/src/pages/components/Navbar/SubMenu.js
+++ b/src/pages/components/Navbar/SubMenu.js
@@ -30,6 +30,24 @@ const SubMenu = ({ isVisible, transparent }) => {
   useEffect(() => {
     changeLanguage(language);
   }, [language]);
+  // Check if the viewport matches a mobile screen width
+    const mediaQuery = window.matchMedia('(max-width: 767px)');
+    const handleMediaQueryChange = (event) => {
+      setIsMobile(event.matches);
+    };
+
+    // Initial check
+    handleMediaQueryChange(mediaQuery);
+
+    // Listen for changes in viewport width
+    mediaQuery.addEventListener('change', handleMediaQueryChange);
+
+    // Clean up the event listener
+    return () => {
+      mediaQuery.removeEventListener('change', handleMediaQueryChange);
+    };
+  }, []);
+
   return (
     <ul
       className={`navbar ${transparent ? 'transparent-navbar' : ''} 

From 74a956a2b7f332ab44a84d1eea78c5bee48cc47b Mon Sep 17 00:00:00 2001
From: Peace Oloruntoba <116691242+PeaceOloruntoba@users.noreply.github.com>
Date: Wed, 21 Jun 2023 19:56:04 +0100
Subject: [PATCH 2/3] solved

---
 src/pages/components/Navbar/SubMenu.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/components/Navbar/SubMenu.js b/src/pages/components/Navbar/SubMenu.js
index 3b81eb87..8db91664 100644
--- a/src/pages/components/Navbar/SubMenu.js
+++ b/src/pages/components/Navbar/SubMenu.js
@@ -53,7 +53,8 @@ const SubMenu = ({ isVisible, transparent }) => {
       className={`navbar ${transparent ? 'transparent-navbar' : ''} 
       ${isVisible ? 'visible opacity-1' : 'hidden opacity-0'}
       ${isVisible ? '' : 'pointer-events-none'}
-      space-y-5 lg:space-y-0 lg:space-x-5 transition-all duration-100`}
+      space-y-5 lg:space-y-0 lg:space-x-5 transition-all duration-100
+      ${isMobile ? 'text-red-500' : ''}`}
     >
       <li className="transition-element">
         <button

From 8abe3577942bb89bf372178b5bb40c2018774dd3 Mon Sep 17 00:00:00 2001
From: Peace Oloruntoba <116691242+PeaceOloruntoba@users.noreply.github.com>
Date: Thu, 22 Jun 2023 09:30:02 +0100
Subject: [PATCH 3/3] Update SubMenu.js

---
 src/pages/components/Navbar/SubMenu.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/components/Navbar/SubMenu.js b/src/pages/components/Navbar/SubMenu.js
index 8db91664..ae0817c7 100644
--- a/src/pages/components/Navbar/SubMenu.js
+++ b/src/pages/components/Navbar/SubMenu.js
@@ -36,6 +36,14 @@ const SubMenu = ({ isVisible, transparent }) => {
       setIsMobile(event.matches);
     };
 
+    const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 767px)');
+    const handleMediaQueryChange = (event) => {
+      setIsMobile(event.matches);
+    };
+
     // Initial check
     handleMediaQueryChange(mediaQuery);
 
@@ -46,7 +54,7 @@ const SubMenu = ({ isVisible, transparent }) => {
     return () => {
       mediaQuery.removeEventListener('change', handleMediaQueryChange);
     };
-  }, []);
+  }, []); // Empty dependency array to run the effect only once
 
   return (
     <ul