Remove variant from page

CodeForAfrica · Oct 17, 2024 · 80199d5 · 80199d5
1 parent 6a1a748
commit 80199d5
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 99 deletions.
diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,101 +1,115 @@
 import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
-import { Grid } from "@mui/material";
+import { Grid, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 
 import useStyles from "./useStyles";
 
 import Section from "@/climatemappedafrica/components/Section";
 
 function Footer(props) {
-  const { title, connect, description, logo: logoProps, links } = props;
+  const {
+    title,
+    connect,
+    description,
+    logo: logoProps,
+    links,
+    variant,
+  } = props;
   const classes = useStyles(props);
+
+  const theme = useTheme();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"));
   return (
-    <div className={classes.root}>
-      <Section
-        classes={{
-          root: classes.section,
-        }}
-      >
-        <Grid container direction="row" justifyContent="space-between">
-          <Grid item xs={12} container>
-            {logoProps && (
-              <LogoButton
-                {...logoProps}
-                component="a"
+    !(variant === "explore" && isDesktop) && (
+      <div className={classes.root}>
+        <Section
+          classes={{
+            root: classes.section,
+          }}
+        >
+          <Grid container direction="row" justifyContent="space-between">
+            <Grid item xs={12} container>
+              {logoProps && (
+                <LogoButton
+                  {...logoProps}
+                  component="a"
+                  classes={{
+                    root: classes.logoButton,
+                  }}
+                />
+              )}
+            </Grid>
+            <Grid item xs={12} lg={6}>
+              {description && (
+                <RichText
+                  variant="body1"
+                  className={classes.description}
+                  elements={description}
+                  typographyProps={{
+                    LinkProps: {
+                      color: "text.secondary",
+                      sx: {
+                        textDecorationColor: "text.secondary",
+                        textDecoration: "underline",
+                      },
+                    },
+                  }}
+                />
+              )}
+              <Copyright
+                copyright={`© ${new Date().getFullYear()} ${title}`}
                 classes={{
-                  root: classes.logoButton,
+                  root: classes.copyright,
+                  text: classes.copyrightText,
                 }}
               />
-            )}
-          </Grid>
-          <Grid item xs={12} lg={6}>
-            {description && (
-              <RichText
-                variant="body1"
-                className={classes.description}
-                elements={description}
-                typographyProps={{
-                  LinkProps: {
-                    color: "text.secondary",
-                    sx: {
-                      textDecorationColor: "text.secondary",
-                      textDecoration: "underline",
-                    },
-                  },
+            </Grid>
+            <Grid item xs={12} lg={4}>
+              <Grid
+                container
+                classes={{
+                  root: classes.allLinks,
                 }}
-              />
-            )}
-            <Copyright
-              copyright={`© ${new Date().getFullYear()} ${title}`}
-              classes={{
-                root: classes.copyright,
-                text: classes.copyrightText,
-              }}
-            />
-          </Grid>
-          <Grid item xs={12} lg={4}>
-            <Grid
-              container
-              classes={{
-                root: classes.allLinks,
-              }}
-            >
-              <Grid item xs={12} lg={6}>
-                {links && (
-                  <QuickLinks
-                    linkComponent={Link}
-                    {...links}
-                    classes={{
-                      root: classes.quickLinkRoot,
-                      list: classes.quickList,
-                      link: classes.quickLink,
-                      title: classes.quickLinksTitle,
+              >
+                <Grid item xs={12} lg={6}>
+                  {links && (
+                    <QuickLinks
+                      linkComponent={Link}
+                      {...links}
+                      classes={{
+                        root: classes.quickLinkRoot,
+                        list: classes.quickList,
+                        link: classes.quickLink,
+                        title: classes.quickLinksTitle,
+                      }}
+                    />
+                  )}
+                </Grid>
+                <Grid item xs={12} lg={6}>
+                  <StayInTouch
+                    {...connect}
+                    LinkProps={{
+                      component: Link,
+                      sx: { color: "text.secondary" },
+                    }}
+                    TitleProps={{
+                      variant: "footerCap",
+                      sx: { color: "text.secondary" },
                     }}
+                    sx={{ gap: 2 }}
+                    direction="column"
                   />
-                )}
-              </Grid>
-              <Grid item xs={12} lg={6}>
-                <StayInTouch
-                  {...connect}
-                  LinkProps={{
-                    component: Link,
-                    sx: { color: "text.secondary" },
-                  }}
-                  TitleProps={{
-                    variant: "footerCap",
-                    sx: { color: "text.secondary" },
-                  }}
-                  sx={{ gap: 2 }}
-                  direction="column"
-                />
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
-        </Grid>
-      </Section>
-    </div>
+        </Section>
+      </div>
+    )
   );
 }
 

diff --git a/apps/climatemappedafrica/src/components/Navigation/index.js b/apps/climatemappedafrica/src/components/Navigation/index.js
@@ -45,7 +45,7 @@ function Navigation({ variant, ...props }) {
         >
           {variant?.toLowerCase() === "explore" ? (
             <ExploreNavigation
-              variant="explore"
+              variant={variant}
               {...props}
               classes={{ section: classes.section }}
             />

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -4,7 +4,7 @@ export function imageFromMedia(alt, url) {
   return { alt, src: url };
 }
 
-function getFooter(siteSettings) {
+function getFooter(siteSettings, variant) {
   const {
     connect,
     footerNavigation,
@@ -30,10 +30,11 @@ function getFooter(siteSettings) {
     },
     newsletter,
     title,
+    variant,
   };
 }
 
-function getNavBar(siteSettings) {
+function getNavBar(siteSettings, variant) {
   const {
     connect: { links = [] },
     primaryNavigation: { menus = [], connect = [] },
@@ -48,6 +49,7 @@ function getNavBar(siteSettings) {
     drawerLogo: imageFromMedia(title, drawerLogo.url),
     menus,
     socialLinks,
+    variant,
   };
 }
 
@@ -73,15 +75,15 @@ export async function getPageProps(api, context) {
   } = hurumap;
 
   const blocks = await blockify(page.blocks, api, context);
+  const variant = page.slug === explorePage.slug ? "explore" : "default";
 
   const siteSettings = await api.findGlobal("settings-site");
-  const footer = getFooter(siteSettings);
-  const menus = getNavBar(siteSettings);
+  const footer = getFooter(siteSettings, variant);
+  const menus = getNavBar(siteSettings, variant);
 
   return {
     blocks,
     footer,
     menus,
-    variant: page.slug === explorePage.slug ? "explore" : "default",
   };
 }
diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js
@@ -1,5 +1,3 @@
-import { useMediaQuery } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
 import { NextSeo } from "next-seo";
 import React from "react";
 import { SWRConfig } from "swr";
@@ -15,18 +13,7 @@ const componentsBySlugs = {
   team: AboutTeam,
 };
 
-function Index({
-  blocks,
-  menus,
-  footer: footerProps,
-  seo = {},
-  variant,
-  fallback,
-}) {
-  const theme = useTheme();
-
-  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"));
-
+function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
   const pageSeo = {};
   pageSeo.title = seo?.title || undefined;
   pageSeo.description = seo?.metaDesc || undefined;
@@ -54,7 +41,7 @@ function Index({
   }
   return (
     <>
-      <Navigation {...menus} variant={variant} />
+      <Navigation {...menus} />
       <NextSeo
         {...pageSeo}
         nofollow={seo?.metaRobotsNofollow !== "follow"}
@@ -69,7 +56,7 @@ function Index({
           return <Component {...block} key={block.slug} />;
         })}
       </PageConfig>
-      {!(variant === "explore" && isDesktop) && <Footer {...footerProps} />}
+      <Footer {...footerProps} />
     </>
   );
 }