From 3b2b153b41a1f80b3fa17f2795c00d4ff56e532f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:41:56 +0300
Subject: [PATCH] Improve navbar

---
 .../src/components/Menu/index.js              | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
index aaafb8e87..a34729577 100644
--- a/apps/climatemappedafrica/src/components/Menu/index.js
+++ b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -20,7 +20,7 @@ function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
         },
       }}
     >
-      {links.map((item, index) => (
+      {links.map((item) => (
         <Grid
           item
           key={item.label}
@@ -46,21 +46,35 @@ function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
             href={item.href}
             size="large"
             underline="none"
-            variant={index !== 0 ? "text" : "outlined"}
+            variant={item.href === exploreHref ? "text" : "outlined"}
             sx={({ palette, typography }) => ({
               borderRadius: 20,
               border: item.href === exploreHref ? "3px solid" : 0,
-              padding: `${typography.pxToRem(14)} ${typography.pxToRem(28)} `,
-              color: index !== 0 ? palette.grey.dark : palette.primary.main,
-              "&:hover": {
-                color: index !== 0 ? "#707070" : palette.primary.main,
+              padding: {
+                xs:
+                  item.href === exploreHref
+                    ? `${typography.pxToRem(14)} ${typography.pxToRem(28)} `
+                    : "unset",
+                lg:
+                  item.href === exploreHref
+                    ? `${typography.pxToRem(14)} ${typography.pxToRem(28)} `
+                    : `${typography.pxToRem(7)} ${typography.pxToRem(18)}`,
+              },
+              margin:
+                item.href === exploreHref
+                  ? 0
+                  : `${typography.pxToRem(10)} ${typography.pxToRem(-8)}`,
+              color:
+                item.href === exploreHref
+                  ? palette.primary.main
+                  : palette.grey.dark,
+              "&:hover, &:focus, &:focus-within": {
+                backgroundColor: "transparent",
+                textDecoration: "none",
+                color:
+                  item.href === exploreHref ? palette.primary.main : "#707070",
+                border: item.href === exploreHref ? "1px solid" : 0,
               },
-              ...(index === 0 && {
-                "&:hover": {
-                  padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)}`,
-                  border: "1px solid",
-                },
-              }),
               ...LinkProps?.sx,
             })}
           >