Push animation is not pushing content

[mihail-antonov]

Hello there. First of all superb sidebar component! I have a minor issue though. I've done everything that was shown in the guide and still couldn't get the [push] effect to work. Here is my code:

import React from "react";
import Menu from "./components/sidebar/Sidebar";
import "./assets/css/app.css";

function App() {
  return (
    <div id="outer-container">
      <Menu pageWrapId={"page-wrap"} outerContainerId={"outer-container"} />
      <main id="page-wrap">asdasdqwasdqwdasdqwdasdqwdasdqwdasdawdqd</main>
    </div>
  );
}

export default App;

import React from 'react';
import { push as Menu } from 'react-burger-menu';
import './sidebar-style.css';

export default props => {
  return (
    <Menu>
      <a className="menu-item" href="/">
        Home
      </a>
      <a className="menu-item" href="/salads">
        Salads
      </a>
      <a className="menu-item" href="/pizzas">
        Pizzas
      </a>
      <a className="menu-item" href="/desserts">
        Desserts
      </a>
    </Menu>
  );
};

And the *.css files are as the demo. Thank you in advance!

Best regards, Mihail

[negomi]

Hi @mihail-antonov,

Glad you like the component :)

The problem is that you're not passing the props down to the actual Menu component in your components/sidebar/Sidebar file. It should be like this:

import React from 'react';
import { push as Menu } from 'react-burger-menu';
import './sidebar-style.css';

export default props => {
  return (
    <Menu {...props}> // <-------- pass props here
      <a className="menu-item" href="/">
        Home
      </a>
      <a className="menu-item" href="/salads">
        Salads
      </a>
      <a className="menu-item" href="/pizzas">
        Pizzas
      </a>
      <a className="menu-item" href="/desserts">
        Desserts
      </a>
    </Menu>
  );
};