Merge pull request #1079 from CodeForAfrica/fix/mobile-fixes

Enhance Mobile Navigation UX and Styling

Author: kelvinkipruto

apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js

@@ -1,4 +1,3 @@
-import { Link } from "@commons-ui/next";
 import {
   IconButton,
   InputBase,
@@ -37,9 +36,26 @@ function DropdownSearch({
     setSelectedLocation(null);
   };
 
+  const handleClickSearch = () => {
+    if (onClick) {
+      onClick(selectedLocation);
+    } else if (selectedLocation) {
+      const href = `${hrefProp}/${selectedLocation}`;
+      router.push(href);
+    } else if (query) {
+      router.push("/404");
+    }
+  };
+
   const handleSelect = (code, name) => {
     setQuery(name.toLowerCase());
     setSelectedLocation(code);
+    if (onClick) {
+      onClick(code);
+    } else {
+      const href = `${hrefProp}/${code}`;
+      router.push(href);
+    }
   };
 
   useEffect(() => {
@@ -53,17 +69,6 @@ function DropdownSearch({
     }
   }, [locations, selectedLocation, query]);
 
-  const handleClickSearch = () => {
-    if (onClick) {
-      onClick(selectedLocation);
-    } else if (selectedLocation) {
-      const href = `${hrefProp}/${selectedLocation}`;
-      router.push(href);
-    } else if (query) {
-      router.push("/404");
-    }
-  };
-
   let iconComponent = SearchIcon;
   let iconBorder;
   if (variant === "explore") {
@@ -171,14 +176,13 @@ function DropdownSearch({
           >
             {suggestions.map(({ name, code }) => (
               <ListItem
-                component={Link}
-                href={`${hrefProp}/${code}`}
                 variant="subtitle1"
                 underline="none"
                 onClick={() => handleSelect(code, name)}
                 sx={({ typography, palette }) => ({
                   paddingLeft: typography.pxToRem(20),
                   color: palette.text.hint,
+                  cursor: "pointer",
                 })}
                 key={code}
               >

apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js

@@ -105,7 +105,12 @@ function MobileNavigation({
             padding: 0,
           }}
         >
-          <Section>
+          <Section
+            fixed={false}
+            sx={{
+              padding: `0 ${theme.typography.pxToRem(20)}`,
+            }}
+          >
             <Grid
               container
               alignItems="center"
@@ -152,15 +157,20 @@ function MobileNavigation({
             padding: `${typography.pxToRem(40)} 0`,
           })}
         >
-          <Section>
+          <Section
+            fixed={false}
+            sx={{
+              padding: `0 ${theme.typography.pxToRem(20)}`,
+            }}
+          >
             <Menu
               explorePagePath={explorePagePath}
               links={menus}
               socialLinks={socialLinks}
               LinkProps={{
                 sx: {
-                  padding: 0,
                   margin: `${theme.typography.pxToRem(10)} 0`,
+                  color: "text.secondary",
                 },
               }}
             >