Topic: MDB siderbar with react

My Python free asked 5 years ago


Anyone tried mdb jquery version with react. Unable to initialize siderbar..

Currently, we don't have sideNav component for React as we have released only free version. SideNav is a premium component and will be released with MDB Pro

praveen pandey pro commented 4 years ago

I am a pro user of MDB When i copy paste the code of SideNav its showing me only blank space i unable to see UI of side nav

Mikołaj Smoleński staff commented 4 years ago

Did You try to install MDB React Pro as a self independent project? There are many docs pages prepared for users, which might be helpful to understand how our components work.

praveen pandey pro commented 4 years ago

<a href="https://mdbootstrap.com/react/advanced/sidenav/" rel="nofollow">https://mdbootstrap.com/react/advanced/sidenav/</a> I used this one but i did not know which packages i need to import and its not opening in mobile version its opening only in desktop version of my website

Mikołaj Smoleński staff commented 4 years ago

These are the components You need to import from 'mdbreact': { SideNav, SideNavNav, SideNavCat, SideNavItem, Fa }

praveen pandey pro commented 4 years ago

it showing only bars icon not a proper navigation bar as they shown in MDB live preview please refer the link <a href="https://mdbootstrap.com/previews/docs/latest/html/skins/white-skin.html" rel="nofollow">https://mdbootstrap.com/previews/docs/latest/html/skins/white-skin.html</a> Open in Mobile version

Mikołaj Smoleński staff commented 4 years ago

It is showing bars, because it's the only way to make it work with our React Documentation pages. To make it work in Your project You just need to add this attributes to Your button in navbar: onClick={this.handleToggleClickA} key="sideNavToggleA".

sourabha22 pro commented 4 years ago

Hi. Does the Side Nav component of React Pro contains a similar behavior as of <a href="https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-fixed.html&quot" rel="nofollow">https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-fixed.html</a> (Bootstrap version with Jquery which contains hamburger icon to open side nav and is hidden automatically) I am planning to purchase the pro version for React soon. But trying to gather some facts before hand. So is the question.

Mikołaj Smoleński staff commented 4 years ago

Hi, For this moment we provide two independent components: SideNav and Navbar. However, making them work together is possible with some JS and React skills.

sourabha22 pro commented 4 years ago

Thanks Mikolaj. When do you think will that feature be available out-of-box? Also when I visit https://mdbootstrap.com/react/advanced/sidenav/ and go to live preview examples  https://mdbootstrap.com/previews/docs/latest/html/skins/white-skin.html, it shows side bar with hamburger and sliding effect upon clicking it. It is under React-Advanced example so creates the confusion.

Mikołaj Smoleński staff commented 4 years ago

I've added this task to the most imporant things to do. We'll try to create double-bar with the next release (in two weeks)

sourabha22 pro commented 4 years ago

Highly appreciated. I believe it should not prevent me from purchasing the Pro version and i should be able to get the incremental updates as they are made available.

Mikołaj Smoleński staff commented 4 years ago

We are doing our best to improve MDB React PRO.


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags