From 1a664e05c8d2189774bd9e927ec46ab41aa8d6d2 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:37:05 +0300
Subject: [PATCH] Remove unused Styles from Mobile Navigation

---
 .../src/components/Menu/index.js              |  3 +-
 .../Navigation/MobileNavigation/index.js      | 49 +++----------------
 2 files changed, 9 insertions(+), 43 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
index ccddec3ac..d1cc93413 100644
--- a/apps/climatemappedafrica/src/components/Menu/index.js
+++ b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -3,7 +3,7 @@ import { Grid, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-function Menu({ children, explorePagePath, links, socialLinks }) {
+function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
   if (!links?.length) {
     return null;
   }
@@ -60,6 +60,7 @@ function Menu({ children, explorePagePath, links, socialLinks }) {
                 padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)} `,
                 border: "1px solid",
               },
+              ...LinkProps,
             })}
           >
             <Typography
diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
index 0b40d499b..784532a86 100644
--- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
@@ -6,8 +6,8 @@ import {
   IconButton,
   DialogContent,
   SvgIcon,
+  useTheme,
 } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -20,38 +20,6 @@ import Menu from "@/climatemappedafrica/components/Menu";
 import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 import Section from "@/climatemappedafrica/components/Section";
 
-const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
-  label: {
-    [breakpoints.up("lg")]: {
-      fontWeight: 600,
-      letterSpacing: "1.6px",
-      fontSize: typography.pxToRem(20),
-    },
-  },
-  buttonMenu: {
-    margin: 0,
-  },
-  links: {
-    display: "inline-block",
-  },
-  menuLinks: {
-    color: palette.text.secondary,
-    display: "inline-block",
-    margin: `${typography.pxToRem(10)} 0`,
-    "&:hover, &:focus, &:focus-within": {
-      backgroundColor: "transparent",
-      textDecoration: "none",
-      color: palette.text.secondary,
-    },
-  },
-  mainMenu: {
-    [breakpoints.up("lg")]: {
-      flexDirection: "column",
-      justifyContent: "flex-start",
-    },
-  },
-}));
-
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="left" timeout={1000} ref={ref} {...props} />;
 });
@@ -65,9 +33,9 @@ function MobileNavigation({
   sx,
   ...props
 }) {
-  const classes = useStyles(props);
   const [open, setOpen] = useState(false);
   const router = useRouter();
+  const theme = useTheme();
 
   const handleClickOpen = (e) => {
     e?.preventDefault();
@@ -103,8 +71,8 @@ function MobileNavigation({
           aria-label="Open drawer"
           size="medium"
           onClick={handleClickOpen}
-          sx={(theme) => ({
-            color: theme.palette.grey.dark,
+          sx={({ palette }) => ({
+            color: palette.grey.dark,
             padding: 0,
           })}
         >
@@ -189,12 +157,9 @@ function MobileNavigation({
               explorePagePath={explorePagePath}
               links={menus}
               socialLinks={socialLinks}
-              classes={{
-                root: classes.mainMenu,
-                links: classes.links,
-                menuLinks: classes.menuLinks,
-                label: classes.label,
-                menu: classes.buttonMenu,
+              LinkProps={{
+                padding: 0,
+                margin: `${theme.typography.pxToRem(10)} 0`,
               }}
             >
               <DropdownSearch