From bec6147ba35c67ec13b00b37e627cc4a57b31dc8 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:59:22 +0300
Subject: [PATCH] Fix Navbar hover color

---
 .../src/components/Menu/index.js                  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
index 2fd965dc2..aaafb8e87 100644
--- a/apps/climatemappedafrica/src/components/Menu/index.js
+++ b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -42,7 +42,6 @@ function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
           })}
         >
           <Link
-            color={index !== 0 ? "secondary" : "primary"}
             display="inline-flex"
             href={item.href}
             size="large"
@@ -51,15 +50,17 @@ function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
             sx={({ palette, typography }) => ({
               borderRadius: 20,
               border: item.href === exploreHref ? "3px solid" : 0,
-              color: {
-                xs: palette.text.secondary,
-                lg: palette.primary.main,
-              },
               padding: `${typography.pxToRem(14)} ${typography.pxToRem(28)} `,
+              color: index !== 0 ? palette.grey.dark : palette.primary.main,
               "&:hover": {
-                padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)} `,
-                border: "1px solid",
+                color: index !== 0 ? "#707070" : palette.primary.main,
               },
+              ...(index === 0 && {
+                "&:hover": {
+                  padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)}`,
+                  border: "1px solid",
+                },
+              }),
               ...LinkProps?.sx,
             })}
           >