Topic: The sidenav example doesn\'t work

Bhagya pro asked 4 years ago


Example basic usage given on https://mdbootstrap.com/react/advanced/sidenav/ does not work. I use the PRO version and it does not return any errors but the page is blank. My app.js is this,
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import SideNavPage from './components/SideNavPage'

class App extends Component {
  render() {
    return (
      <div>
        <SideNavPage/>
      </div>
    );
  }
}

export default App;
  SideNavPage.js is this, which is same as your sample code except without logo urls.
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, SideNavLink, Container, Row } from 'mdbreact';

class SideNavPage extends React.Component {
constructor(props) {
super(props);
this.state ={
isLeftOpen: false,
isRightOpen: false
};
}

// Slide out buttons event handlers
handleToggleClickA = () => {
this.setState({
isLeftOpen: !this.state.isLeftOpen
})
}
handleToggleClickB = () => {
this.setState({
isRightOpen: !this.state.isRightOpen
})
}

render() {
// Because the toggling buttons are nearly identical, we create a function to render them:
const createButton = (onClick, side) => {
return <div style={{width: "50%", textAlign: "center"}}>
<a href="#!" onClick={onClick} key={'toggleThe'+side+'SideNav'}><Fa icon="bars" size="5x"></Fa></a>
</div>
}

return (
<Router>
<div>
<Container>
{/* the buttons toggling visibility of SideNavs: */}
<Row style={{height: "80vh", alignItems: "center"}} >
{createButton(this.handleToggleClickA, "Left")}
{createButton(this.handleToggleClickB, "Right")}
</Row>

{/* the left SideNav: */}
<SideNav hidden triggerOpening={this.state.isLeftOpen} breakWidth={1300} className="deep-purple darken-4">
<li>
<ul className="social">
<li><a href="#!"><Fa icon="facebook"></Fa></a></li>
<li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
<li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
<li><a href="#!"><Fa icon="twitter"></Fa></a></li>
</ul>
</li>
<SideNavNav>
<SideNavCat id="submit-blog-cat" name="Submit blog" icon="chevron-right">
<SideNavLink>Submit listing</SideNavLink>
<SideNavLink>Registration form</SideNavLink>
</SideNavCat>
<SideNavCat id="instruction-cat" name="Instruction" icon="hand-pointer-o" href="#">
<SideNavLink>For bloggers</SideNavLink>
<SideNavLink>For authors</SideNavLink>
</SideNavCat>
<SideNavCat id="about-cat" name="About" icon="eye">
<SideNavLink>Instruction</SideNavLink>
<SideNavLink>Monthly meetings</SideNavLink>
</SideNavCat>
<SideNavCat id="contact-me-cat" name="Contact me" icon="envelope-o">
<SideNavLink>FAQ</SideNavLink>
<SideNavLink>Write a message</SideNavLink>
</SideNavCat>
</SideNavNav>
</SideNav>

{/* the right SideNav: */}
<SideNav hidden triggerOpening={this.state.isRightOpen} className="side-nav-light" right breakWidth={1300}>
<li>
<ul className="social">
<li><a href="#!"><Fa icon="facebook"></Fa></a></li>
<li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
<li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
<li><a href="#!"><Fa icon="twitter"></Fa></a></li>
</ul>
</li>
<SideNavNav>
<SideNavCat id="submit-blog-cat" name="Submit blog" icon="chevron-right" >
<SideNavLink className="active">Submit listing</SideNavLink>
<SideNavLink>Registration form</SideNavLink>
</SideNavCat>
<SideNavCat id="instruction-cat" name="Instruction" icon="hand-pointer-o">
<SideNavLink>For bloggers</SideNavLink>
<SideNavLink>For authors</SideNavLink>
</SideNavCat>
<SideNavCat id="about-cat" name="About" icon="eye">
<SideNavLink>Instruction</SideNavLink>
<SideNavLink>Monthly meetings</SideNavLink>
</SideNavCat>
<SideNavCat id="contact-me-cat" name="Contact me" icon="envelope-o">
<SideNavLink>FAQ</SideNavLink>
<SideNavLink>Write a message</SideNavLink>
</SideNavCat>
</SideNavNav>
</SideNav>

</Container>
</div>
</Router>
);
}
}

export default SideNavPage;
     

Anna Morawska staff commented 4 years ago

Hello, thank you for sharing this :) Well, but it's interesting, I've just copy-paste our snippet and it looks like it works fine for me. Best, Ania

Bhagya pro commented 4 years ago

Hi Anna, Thanks for the response. Did you use create-react-app to generate your project? I tried on different browsers, but still the same result. Is it possible for you to share your code? Thanks

Anna Morawska staff commented 4 years ago

Hi, yes, actually my setup is the same as in our zip package ( basically CRA boilerplate ). The code is the same as in our snippet. Maybe something went wrong during installation? Did you follow our "5 min Quick Start" tutorial? Best, Ania

Bhagya pro commented 4 years ago

Yes, my all other components are fine. I tried to add sidenav but failed.

Bhagya pro commented 4 years ago

Also, SideNav is a Pro component. It does not in your zip package.

Anna Morawska staff commented 4 years ago

What version are you using? 4.7.1? If so, please update it to v. 4.8.0, it should fix the problem. There were some syntax changes since then.

Bhagya pro commented 4 years ago

I'm using pro version like this, "mdbreact": "git+https://oauth2:@git.mdbootstrap.com/mdb/react/re-pro.git"

Anna Morawska staff answered 4 years ago


Hi yujanrichie, Have you solved your problem? It's hard to tell what's wrong. I suggest opening a new ticket on our support board and provide us with your code. We will try to help :) Best, Ania

yujanrichie free answered 4 years ago


Hi. I'm using the pro version. I don't have MDB downloaded but instead just have it listed into my dependency and did the npm install as you have mentioned. I have the same issue being just a blank page. I actually get http://localhost:8080/undefined after routing the SideNavPage component from my App.js. I tried out your other SideNav examples from react-navigation link and they work so that confirms I have my PRO mode working properly.

Anna Morawska staff answered 4 years ago


You're welcome :) Please, check out our examples here: https://mdbootstrap.com/react/layout/react-navigation/#f-s-f-n To change colour theme please add  e.g. "grey-skin" class to your body element in index.html file in public directory. Best, Ania

Anna Morawska staff answered 4 years ago


Ok, so please copy and then remove this line from you package.json. Save the file and then run npm install. After that add again this line "mdbreact": "git+https://oauth2:@git.mdbootstrap.com/mdb/react/re-pro.git" ( don't forget to add your token ) and again run npm install - it should help :)

Bhagya pro commented 4 years ago

Thanks Anna, it works. Can you provide the source of this SideNav implementation? https://mdbootstrap.com/previews/docs/latest/html/skins/grey-skin.html


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No