pushRotate not working

[laazaz]

I did the same example as described in here, most of them work except the "pushRotate" which generates just a "slide" menu

https://www.digitalocean.com/community/tutorials/react-react-burger-menu-sidebar

`import` { pushRotate as Menu } from 'react-burger-menu';

[negomi]

Hey @laazaz,

Are you getting any console errors when you open and close the menu?

My guess is that the outer container and page wrap IDs are missing or incorrect:

function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

If the pageWrapId and outerContainerId props don't match the IDs of these elements, you will just see a slide effect for a lot of the menus.

[laazaz]

@negomi thanks for the answer I have exactly the same code

App.js:

import React from 'react';
import './App.css';
import Sidebar from './Sidebar';

function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

Sidebar.js:

import React from 'react';
import './Sidebar.css';
import { pushRotate as Menu } from 'react-burger-menu';

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>
  );
};

The version I've installed: npm install react-burger-menu@2.7.1

The warning it gives (before opening the menu, and nothing happens after):

Tried on Firefox, Chrome (last versions)

Thank you

EDIT: fixed the warning by simply writing export default function Sss() { on the 5th line, but still doesn't work of course.

[negomi]

Ah, the problem is you're adding those props to the Sidebar but not passing them through to the Menu.

So you would need to either name them individually:

<Menu pageWrapId={props.pageWrapId} outerContainerId={props.outerContainerId}>

Or pass all props through:

<Menu {...props}>

And the linter warning is unrelated, as you discovered 🙂