Using React Burger Menu with GatsbyJs

Question

I'm trying to import the component to use it with GatsbyJs and got it working to a certain point but other "effects" apart from slide don't work and there is no error message, also I'm using Styled Components.

Here is my code, honestly I don't know if this is an issue of React-burge-menu or GatsbyJs.

First the component, I have to wrap it on a styled div for it to work as mention here

sidebar.js

import React from 'react'
import { scaleDown as BurgerMenu } from 'react-burger-menu'
import styled from 'styled-components'
import { Link } from 'gatsby'
import MenuLogo from '../assets/logos/letterlogo.png'

const StyledBurgerMenu = styled.div`
.bm-item {
    text-align:center;  
    display: inline-block;
    text-decoration: none;
    margin-bottom: 5vh;
    color: #d1d1d1;
    transition: color 0.2s;
}
.bm-item:hover {
    color: white;
}
.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 15px;
    right: 2vw;
    top: 2vh;
}
.bm-burger-bars {
    background: #373a47;
}
.bm-cross-button {
    height: 30px;
    width: 15px;
}
.bm-cross {
    background: #bdc3c7;
}
.bm-menu {
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5em 1.5em 0;
    font-size: 2em;
}
.bm-morph-shape {
    fill: #373a47;
}
.bm-item-list {
    color: #b8b7ad;
}

.bm-overlay {
    background: rgba(0, 0, 0, 0.3);
}
`

const Logo = styled.img`
width: 30vw;
display: block;
margin: auto;
`

export default () => (
  <StyledBurgerMenu>
    <BurgerMenu width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)

Then I'm calling it to the layout, here I created both outer-container and page-wrap

layout.js

import React from 'react'
import "normalize.css"
import styled from "styled-components"
import SideBar from "./sidebar"

const MainWrap = styled.div`
    height: 100vh;
    overflow: auto;
`;
const PageWrap = styled.div`
    text-align: center;
    overflow: auto;
    height: 100vh;
`;

export default ({children}) => (
  <MainWrap>
    <SideBar pageWrapId={"PageWrap"} outerContainerId={"MainWrap"}/>
    <PageWrap>
      {children}
    </PageWrap>
  </MainWrap>
)

Also tried adding the id directly:

export default ({children}) => (
  <MainWrap id={"outer-container"}>
    <SideBar pageWrapId={"page-wrap"} outerContainerId={"outer-container"}/>
    <PageWrap id={"page-wrap"}>
      {children}
    </PageWrap>
  </MainWrap>
)

In both ways it works but only the slide animation, also I'm calling that layout to an index file that has this code:

index.js

import React from 'react'
import Layout from '../components/layout'
import { StaticQuery, graphql } from 'gatsby'
import styled from 'styled-components'
import { FaFacebook, FaInstagram, FaYoutubeSquare, FaTwitterSquare } from 'react-icons/fa'

const Hero = styled.div`
    margin-top: 20vh;
    `
const SocialLinks = styled.div`
    margin-top: 5vh;
    a{
        display: inline-block;
        margin: 1vw;
    }
`;
export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
            description
            fb
            twitter
            youtube
            instagram
          }
        }
      }
    `}
    render={data => (
      <Layout>
        <Hero>
          <h1>{data.site.siteMetadata.title}</h1>
          <h2>{data.site.siteMetadata.description}</h2>
        </Hero>
        <SocialLinks>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.fb}><FaFacebook size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.youtube}><FaYoutubeSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.twitter}><FaTwitterSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.instagram}><FaInstagram size={50} color="black"/></a>
        </SocialLinks>
      </Layout>
        )}
    />
)

Here is a live example of the build with that code, as you will see it works but it doesn't scale down. Demo

Hope you can point me to the right direction.

Thanks in advance

Answer 1

Reviving a 2 year old question...

You are passing the pageWrapId and outerContainerId into your SideBar component. You need to take them in as props and pass them into the BurgerMenu component.

Github Docs

sidebar.js

export default ({pageWrapId, outerContainerId}) => (
  <StyledBurgerMenu>
    <BurgerMenu pageWrapId={pageWrapId} outerContainerId={outerContainerId} width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)