Topic: Double Navigation with fixed SideNav & fixed Navbar - How do I ensure the SideNav is scrollable?

Nates premium asked 3 years ago


Double Navigation with fixed SideNav & fixed Navbar

I am trying to make the SideNav Scrollable because I have so many menu items.

Please can anyone advise?

https://mdbootstrap.com/docs/react/navigation/compositions/#double-nav-fixed-sidenav-navbar

I am using this code.


Anna Morawska staff commented 3 years ago

Hi there - thank you for reporting the issue, this is a bug - we will fix this in one of the future releases.

Best, Ania


Nates premium commented 3 years ago

Thanks, is there a way for me to be notified of the fix? I am using this in my project and I am quite novice to ReactJS so kinda reliant on the fix. Or is there an alternative?

Also, if I may ask here, is there a way to have the menu items striped. I tried putting the "striped" on different elements, but not working. Is it only for tables?


Anna Morawska staff answered 3 years ago


Hi there, Regarding the scrollable issue - I can't tell now, it is something I am going to work on today. I'll let you know here, as soon as I figure sth out :)

About the second question - in general Sidenav doesn't have striped property or anything similar - you can check all available options in the API tab in the documentation. But - you can achieve that effect using className on MDBSideNavCat component together with one of our colour classes.

For example:

import React from 'react';
import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';

class SideNavPage extends React.Component {
  state = {
    isOpen: false
  }

  handleToggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };

  render() {
    const { isOpen } = this.state;
    return (
      <MDBContainer>
        <MDBRow>
          <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
        </MDBRow>
        <MDBSideNav
          logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
          hidden
          triggerOpening={isOpen}
          breakWidth={1300}
          className="deep-purple darken-4"
        >
          <li>
            <ul className="social">
              <li>
                <a href="#!">
                  <MDBIcon fab icon="facebook-f" />
                </a>
              </li>
              <li>
                <a href="#!">
                  <MDBIcon fab icon="pinterest" />
                </a>
              </li>
              <li>
                <a href="#!">
                  <MDBIcon fab icon="google-plus-g" />
                </a>
              </li>
              <li>
                <a href="#!">
                  <MDBIcon fab icon="twitter" />
                </a>
              </li>
            </ul>
          </li>
          <MDBSideNavNav>
            <MDBSideNavCat
              className="indigo accent-1"
              name="Submit blog"
              id="submit-blog"
              icon="chevron-right"
            >
              <MDBSideNavLink>Submit listing</MDBSideNavLink>
              <MDBSideNavLink>Registration form</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name="Instruction"
              id="instruction"
              iconRegular
              icon="hand-pointer"
              href="#"
            >
              <MDBSideNavLink>For bloggers</MDBSideNavLink>
              <MDBSideNavLink>For authors</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat name="About" id="about" icon="eye" className="indigo accent-1">
              <MDBSideNavLink>Instruction</MDBSideNavLink>
              <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name="Instruction"
              id="instruction"
              iconRegular
              icon="hand-pointer"
              href="#"
            >
              <MDBSideNavLink>For bloggers</MDBSideNavLink>
              <MDBSideNavLink>For authors</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat name="Contact me" id="contact-me" iconRegular icon="envelope" className="indigo accent-1">
              <MDBSideNavLink>FAQ</MDBSideNavLink>
              <MDBSideNavLink>Write a message</MDBSideNavLink>
            </MDBSideNavCat>
          </MDBSideNavNav>
        </MDBSideNav>
      </MDBContainer>
    );
  }
}

export default SideNavPage;

Best, Ania


Nates premium commented 3 years ago

You are awesome, thanks very much


Anna Morawska staff answered 3 years ago


Hi there,

Please try to install our library once again from the branch sidenav. To do so, add "#sidenav" at the end of gitlab url, like is shown bellow:

"dependencies": { "mdbreact": "git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/react/re-pro.git#sidenav" }

It is temporary - the change is going to be included in the next version of our package, but it is scheduled to arrive on April 1st. Then, you can switch back to the branch master.

Let me know if this resolves your problem :)

Best,

Ania


Nates premium commented 3 years ago

Never worked for me, but will wait for the real change.


Anna Morawska staff commented 3 years ago

Sorry, I didn't push a new build to our gitlab repo - try again, now it should work ( remove node_modules and package-lock.json, and install everything again) Please, take into consideration that this feature is still under development, so we still are testing that.



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