※レスポンシブ対応の部分のみ記載
  const useStyles = makeStyles((theme) => ({
    menuLinkBox: {
      [theme.breakpoints.up('sm')]: {
        display: 'block', ←画面サイズがsmより上ならmenuLinkBoxを表示
      },
      [theme.breakpoints.down('sm')]: {
        display: 'none', ←画面サイズがsmより下ならmenuLinkBoxを非表示
      },
    },
    ↑↑↑↑↑
    画面サイズによりどちらかが表示される状態にしている
    ↓↓↓↓↓
    menuLinkBoxSm: {
      [theme.breakpoints.up('sm')]: {
        display: 'none', ←画面サイズがsmより上ならmenuLinkBoxSmを非表示
      },
      [theme.breakpoints.down('sm')]: {
        display: 'block', ←画面サイズがsmより上ならmenuLinkBoxSmを表示
      },
    },
  }));

      <AppBar position='static'>
        <Toolbar>
          <Box>
            <Link to={`/`}>
              <Image/>
            </Link>
          </Box>
          <Box className={styleClass.menuLinkBox}>
            <Link to={`/`}>
              HOME
            </Link>
            ・・・省略・・・
          </Box>
          <Box className={styleClass.menuLinkBoxSm}>
            <IconButton>
              <MenuIcon />
            </IconButton>
            <Menu>
              <MenuItem>
                <Link to={`/`}>
                  HOME
                </Link>
              </MenuItem>
              ・・・省略・・・
            </Menu>
          </Box>
        </Toolbar>
      </AppBar>

import React from "react";
import {useStaticQuery, graphql } from "gatsby";

import Layout from "../components/layout";
import SEO from "../components/seo";
import PostList from "../components/postList";

const BlogIndex = ({location}) => {
  const indexData = useStaticQuery(graphql`
    query IndexDataQuery {
      blog: allMarkdownRemark(filter: {frontmatter: {kind: {regex: "/blog/"}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: 6) {
      ↑同一項目を複数回取得する場合、先頭にblog:(別名 + :)と記載し、別名を設定
      ↑{frontmatter: {kind: {regex: "/blog/"}}}によりblogの記事が取得できます。
      ↑limit: 6で表紙に出力する最新6件と定義
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "YYYY年MM月DD日")
              title
              description
              kind
            }
          }
        }
      }
      work: allMarkdownRemark(filter: {frontmatter: {kind: {regex: "/work/"}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: 6) {
      ↑{frontmatter: {kind: {regex: "/work/"}}}によりworkの記事が取得できます。
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "YYYY年MM月DD日")
              title
              description
              kind
            }
          }
        }
      }
    }
  `);

  const blogs = indexData.blog.edges;←別名blogで取得
  const works = indexData.work.edges;←別名workで取得
  return (
    <Layout location={location}>
      <SEO title="Top" />
      <PostList title="BLOG" listUrl="/blog" postList={blogs}/>
      <PostList title="WORKS" listUrl="/works" postList={works}/>
    </Layout>
  )
}

export default BlogIndex