src/components/footer.js

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

src/components/layout.js

@@ -1,12 +1,10 @@
-import React, { useState } from "react"
+import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Box, Container, CssBaseline, Drawer, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
+import { AppBar, Box, Container, CssBaseline, Grid, 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__}/`
@@ -27,22 +25,18 @@ const Layout = ({ location, title, children, noHeader }) => {
   //   )
   // }
 
-  const [showDrawer, setShowDrawer] = useState(false)
-
   return (
     <>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <AppBar
+        {!noHeader && (
-          component="header"
+          <AppBar
-          color="transparent"
+            component="header"
-          position="relative"
+            color="transparent"
-          elevation={0}
+            position="relative"
-        >
+            elevation={0}
-          <Toolbar
-            sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
           >
-            {!noHeader && (
+            <Toolbar>
               <Link
                 underline="hover"
                 component={GatsbyLink}
@@ -51,22 +45,13 @@ const Layout = ({ location, title, children, noHeader }) => {
               >
                 {title}
               </Link>
-            )}
+            </Toolbar>
-            <IconButton
+          </AppBar>
-              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={false} md={2}>
+            <Grid item xs={12} md={2}>
-              <Box display={{ xs: "none", md: "block" }}>
+              <NavMenu location={location} />
-                <NavMenu location={location} />
-              </Box>
             </Grid>
             <Grid item xs={12} md={6}>
               <main>{children}</main>
@@ -89,20 +74,6 @@ 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, Typography } from "@mui/material"
+import { Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Stack, SvgIcon, 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 HomePage = ({ data, location }) => {
+const BlogIndex = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata?.title || `Title`
   const posts = data.allMarkdownRemark.nodes
 
@@ -81,7 +81,7 @@ const HomePage = ({ data, location }) => {
         positive impact on the world. All of our services reflect our commitment
         to our core values:
       </Typography>
-      <Stack direction={{ xs: "column", md: "row" }}>
+      <Stack direction="row">
         {coreValues.map(({ label, path }) => (
           <Button
             component={GatsbyLink}
@@ -126,7 +126,7 @@ const HomePage = ({ data, location }) => {
   )
 }
 
-export default HomePage
+export default BlogIndex
 
 /**
  * Head export to define metadata for the page