How to use the gatsby-theme-apollo-core.breakpoints.sm function in gatsby-theme-apollo-core

const transitionDuration = 150; // in ms
const Menu = styled.div({
  width: 700,
  marginBottom: 24,
  borderRadius: 4,
  boxShadow,
  backgroundColor: 'white',
  overflow: 'hidden',
  position: 'absolute',
  transformOrigin: '25% 25%',
  transition: `transform ${transitionDuration}ms ease-in-out`,
  outline: 'none',
  [breakpoints.md]: {
    width: 450
  },
  [breakpoints.sm]: {
    width: 'calc(100vw - 48px)'
  }
});

const MenuTitle = styled.h6(smallCaps, {
  margin: 24,
  marginBottom: 0,
  fontSize: 13,
  fontWeight: 600,
  color: colors.text3
});

const StyledNav = styled.nav({
  display: 'flex',
  flexWrap: 'wrap',
  margin: 12

);
}

const EditLink = styled.div({
  display: 'none',
  marginTop: 48,
  justifyContent: 'flex-end',
  [breakpoints.lg]: {
    display: 'flex'
  },
  [breakpoints.md]: {
    display: 'none'
  },
  [breakpoints.sm]: {
    display: 'flex',
    marginTop: 24
  }
});

export default function PageContent(props) {
  const contentRef = useRef(null);
  const [imagesToLoad, setImagesToLoad] = useState(0);
  const [imagesLoaded, setImagesLoaded] = useState(0);

  useMount(() => {
    if (props.hash) {
      // turn numbers at the beginning of the hash to unicode
      // see https://stackoverflow.com/a/20306237/8190832
      const hash = props.hash.toLowerCase().replace(/^#(\d)/, '#\\3$1 ');
      try {

import NavItem from './nav-item';
import PropTypes from 'prop-types';
import React from 'react';
import styled from '@emotion/styled';
import {breakpoints} from 'gatsby-theme-apollo-core';

const Container = styled.nav({
  display: 'flex',
  alignSelf: 'stretch',
  marginLeft: 'auto',
  paddingLeft: 40,
  [breakpoints.sm]: {
    display: 'none'
  }
});

export default function Nav(props) {
  return (
    
      {props.items.map(({value, text, matchRegex, subpages}) => {
        let isActive = matchRegex
          ? new RegExp(matchRegex).test(props.pathname)
          : props.isPathActive(value);
        if (!isActive && subpages) {
          isActive = subpages.some(subpage =>
            props.isPathActive(subpage.value)
          );
        }

svg: {
      fill: 'currentColor'
    }
  },
  'h2:not(:first-child)': {
    marginTop: 56
  },
  '.float': {
    width: '50%',
    marginLeft: 24,
    marginBottom: 24,
    float: 'right',
    img: {
      width: '100%'
    },
    [breakpoints.sm]: {
      width: '100%',
      marginLeft: 0,
      float: 'none'
    }
  }
});

const Chapter = styled.div({
  marginTop: 64
});

const ChapterHeading = styled.h2({
  display: 'flex',
  alignItems: 'center'
});

flexShrink: 0,
  width: 260,
  maxHeight: `calc(100vh - ${headerHeight}px)`,
  marginTop: -36,
  marginLeft: 'auto',
  padding: '40px 56px',
  paddingRight: 0,
  position: 'sticky',
  top: headerHeight,
  [breakpoints.lg]: {
    display: 'none',
  },
  [breakpoints.md]: {
    display: 'block',
  },
  [breakpoints.sm]: {
    display: 'none',
  },
})

const AsideHeading = styled.h3({
  fontWeight: 600,
  fontSize: '1.225rem',
  marginBottom: '1.0875rem',
})

const AsideLinkWrapper = styled.h4({
  display: 'flex',
  fontSize: '1rem',
  marginBottom: 0,
  ':not(:last-child)': {
    marginBottom: 16,