Xtykutl

I am trying to do a very simple React slide in submenu and I don't get why it doesn't work. I am toggling classes with setting the state.

<div id="sideNavBar" className={this.props.sideBar}>

Css:

#sideNavBar {

  transform: translateX(-150px);

  transition: transform 400ms ease-in;

    background-image: linear-gradient(to right, #000000, #3B3B3B);

    position: fixed;

    z-index: 1;

    min-height: 800px;

    width: 180px;

    opacity: 0.8;

}



#sideNavBar.SideBar {

  transform: translateX(0);

}



#sideNavBar.SideBar_hidden {

  transform: translateX(-100%);

}

---------------------------------------------------------ADDITIONAL COMPONENT
App.js
.....

 class App extends Component {

      constructor() {

        super();

        this.state = {

          isBlog: false,

          isPhotography: false,

          isDesign: false,

          sideBar: 'SideBar_hidden'

        }

        this.selectPage = this.selectPage.bind(this);

      }



  selectPage = (event) => {

    event.preventDefault();

    if ((event.target.name)==='blog') {

    this.setState({sideBar: 'SideBar', isBlog: true, isPhotography: false, isDesign: false})

    }

    else if((event.target.name)==='photography') {

    this.setState({sideBar: 'SideBar', isBlog: false, isPhotography: true, isDesign: false})

    }

    else if ((event.target.name)==='design') {

    this.setState({sideBar: 'SideBar', isPhotography: false, isDesign: true})

    };

  }



  render() {

    return (

        <BrowserRouter>

        <div className="App">

        <Navigation selectPage={this.selectPage}/>

          <div className="content">

            <div className="body">

        <Switch>

        <Route exact path='/' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/></div>)}/>

        </Switch>

            <Switch>

            <Route path='/blog' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>

              <Blog /></div>)}/>

            </Switch>

            <Switch>

            <Route path='/photography' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>

              <Photography/></div>)}/>

            </Switch>

            <Switch>

            <Route path='/design' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>

              <Design/></div>)}/>

            </Switch>

            </div>

            <div className="footer">

            </div>

          </div>

        </div>

        </BrowserRouter>

    );

  }

}



export default App;

From "/" clicking any of the menu links (blog etc.) the sidebar menu just pops in. If I am at "/blog" route and refresh the page to set the state back to hidden and then click on the blog link it slides in. But if I am at /blog refresh the page to setthe state to hidden and click on not blog, instead of design it pops in again, instead of slides in. How can I work around this?

I have called SideBar component unnecessarily more than one time. Now it is only loaded once and animation works.