fix footer content

src/components/footer.js

@@ -44,7 +44,7 @@ const ConnectWithUs = () => (
 
 const connectLinks = [
   { label: "RSS feed", url: "/" },
-  { label: "Fedivers", url: "/" },
+  { label: "Fediverse", url: "/" },
   { label: "Gitea", url: "/" },
   { label: "Matrix", url: "/" },
 ]
@@ -107,7 +107,13 @@ const Footer = () => (
             <ConnectWithUs />
             <Stack direction="row" spacing={2}>
               {connectLinks.map(({ label, url }) => (
-                <Link key={label} href={url} target="_blank" fontSize={10}>
+                <Link
+                  key={label}
+                  href={url}
+                  target="_blank"
+                  fontSize={10}
+                  textTransform="lowercase"
+                >
                   {label}
                 </Link>
               ))}

src/components/layout.js

@@ -1,10 +1,12 @@
-import * as React from "react"
+import React, { useState } from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
+import { AppBar, Box, Container, CssBaseline, Drawer, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
 import NavMenu from "./nav-menu"
 import theme from "./theme"
 import Footer from "./footer"
 import flower from "../images/flower.png"
+import MenuIcon from "@mui/icons-material/Menu"
+import CloseIcon from "@mui/icons-material/Close"
 
 const Layout = ({ location, title, children, noHeader }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -25,18 +27,22 @@ const Layout = ({ location, title, children, noHeader }) => {
   //   )
   // }
 
+  const [showDrawer, setShowDrawer] = useState(false)
+
   return (
     <>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        {!noHeader && (
+        <AppBar
-          <AppBar
+          component="header"
-            component="header"
+          color="transparent"
-            color="transparent"
+          position="relative"
-            position="relative"
+          elevation={0}
-            elevation={0}
+        >
+          <Toolbar
+            sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
           >
-            <Toolbar>
+            {!noHeader && (
               <Link
                 underline="hover"
                 component={GatsbyLink}
@@ -45,13 +51,22 @@ const Layout = ({ location, title, children, noHeader }) => {
               >
                 {title}
               </Link>
-            </Toolbar>
+            )}
-          </AppBar>
+            <IconButton
-        )}
+              color="primary"
+              sx={{ display: { xs: "inline-flex", md: "none" } }}
+              onClick={() => setShowDrawer(!showDrawer)}
+            >
+              <MenuIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
         <Container maxWidth="lg" sx={{ py: 8 }}>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={2}>
+            <Grid item xs={false} md={2}>
-              <NavMenu location={location} />
+              <Box display={{ xs: "none", md: "block" }}>
+                <NavMenu location={location} />
+              </Box>
             </Grid>
             <Grid item xs={12} md={6}>
               <main>{children}</main>
@@ -74,6 +89,20 @@ const Layout = ({ location, title, children, noHeader }) => {
           </Grid>
         </Container>
         <Footer />
+        <Drawer
+          anchor="right"
+          open={showDrawer}
+          onClose={() => setShowDrawer(false)}
+        >
+          <Box minWidth={240}>
+            <Box display="flex" justifyContent="flex-end" height={56} pr={2}>
+              <IconButton color="primary" onClick={() => setShowDrawer(false)}>
+                <CloseIcon />
+              </IconButton>
+            </Box>
+            <NavMenu location={location} />
+          </Box>
+        </Drawer>
       </ThemeProvider>
     </>
   )

src/pages/index.js

@@ -4,7 +4,7 @@ import { Link as GatsbyLink, graphql } from "gatsby"
 import Bio from "../components/bio"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
-import { Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Stack, SvgIcon, Typography } from "@mui/material"
+import { Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"
 import EastIcon from '@mui/icons-material/East'
 import { H1Separator, H2Separator } from "../components/heading-separators"
 import LeafIcon from "../components/leaf-icon"
@@ -23,7 +23,7 @@ const coreValues = [
   { label: "Transparency", path: "/"},
 ]
 
-const BlogIndex = ({ data, location }) => {
+const HomePage = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata?.title || `Title`
   const posts = data.allMarkdownRemark.nodes
 
@@ -81,7 +81,7 @@ const BlogIndex = ({ data, location }) => {
         positive impact on the world. All of our services reflect our commitment
         to our core values:
       </Typography>
-      <Stack direction="row">
+      <Stack direction={{ xs: "column", md: "row" }}>
         {coreValues.map(({ label, path }) => (
           <Button
             component={GatsbyLink}
@@ -126,7 +126,7 @@ const BlogIndex = ({ data, location }) => {
   )
 }
 
-export default BlogIndex
+export default HomePage
 
 /**
  * Head export to define metadata for the page