MDBSideNav with slim option, by default Sidebar should be op


Topic: MDBSideNav with slim option, by default Sidebar should be open.

StormX asked 2 years ago

Expected behavior

I wants to be open that sidebar with using slim option ( by defualt).

Actual behavior

Currently its close when the page loads


Jakub Chmura staff premium answered 2 years ago

Hi @StormX,

Yes, the sidebar can be open by default, you just need to change state that controls toggling the sidebar.

This is an example:

import React from 'react';
import {
  MDBIcon,
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBRow,
  MDBBtn
} from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

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

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

      render() {
        const { isOpen } = this.state;
        return (
          <Router>
            <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
                    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'>
                    <MDBSideNavLink>Instruction</MDBSideNavLink>
                    <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
                  </MDBSideNavCat>
                  <MDBSideNavCat
                    name='Contact me'
                    id='contact-me'
                    iconRegular
                    icon='envelope'
                  >
                    <MDBSideNavLink>FAQ</MDBSideNavLink>
                    <MDBSideNavLink>Write a message</MDBSideNavLink>
                  </MDBSideNavCat>
                </MDBSideNavNav>
              </MDBSideNav>
            </MDBContainer>
          </Router>
        );
      }
    }

    export default SideNavPage;

Best, Kuba


StormX commented 2 years ago

Hi, Thanks for the reply. But it doesn't work with a slim option. Like this, https://mdbootstrap.com/img/logo/mdb-transparent.png' hidden triggerOpening={isOpen} breakWidth={1300} className='deep-purple darken-4' >


Jakub Chmura staff premium answered 2 years ago

Hi @StormX,

You're right. I send you the wrong example I'm sorry about that. I've tested the right one but I see it's a bug in our code. We try to fix it as soon as possible.

Best, Kuba


StormX commented 2 years ago

Hi @Jakub, Any progress ?


Jakub Chmura staff premium commented 2 years ago

We are currently working on this bug, I think it should be published at next release (in two weeks). Fix is almost ready but we need to test it.


StormX commented 2 years ago

Can you please share the CSS or something, so that I can fix it temporarily? It's a bit urgent for me.


Jakub Chmura staff premium commented 2 years ago

Unfortunately problem can't be solved by CSS because opening and close event is triggering by methods and depends on state management inside of component.


mark-steven-au pro premium answered 2 years ago

Hi Jacob I am trying to do the same thing as this post. Eg have sidebar open by default and have not had any luck doing this. Today I have updated MDB so theoretically have the latest release. May 26

So as there is no documentation in the hamburger (left side) What are the steps to get this sidebar to start open please.

The one. I am using is the fixed top nav bar and hidden side nav bar

Thanks Mark


Piotr Glejzer staff commented 2 years ago

did you try to use fixed and openNav props?


mark-steven-au pro premium answered 2 years ago

Blockquote class App extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: false, }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA, }); };

render() {

Blockquote Just a refresh of the code on this page. THanks Mark


Piotr Glejzer staff commented 2 years ago

this code dosen't help :( can you paste here? https://codesandbox.io/


mark-steven-au pro premium commented 2 years ago

Hi Piotr,It is using your default Navbar with fixed top Nav and hidden side nav.Found here.https://mdbootstrap.com/docs/react/navigation/compositions/

Ill put the code below but nothing unique at this stage. In the ideal world it would be open then after 3-5 seconds shut


mark-steven-au pro premium answered 2 years ago

Blockquote import React from "react"; import { BrowserRouter as Router } from "react-router-dom"; import { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";

class DoubleNavigationPage extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: false }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA }); };

render() { const mainStyle = { paddingTop: "5rem" };

const specialCaseNavbarStyles = {
  WebkitBoxOrient: "horizontal",
  flexDirection: "row"
};

return (
  <Router>
    <div className="mdb-skin">
      <MDBSideNav
        logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
        triggerOpening={this.state.toggleStateA}
        bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
        mask="strong"
        hidden
      >
        <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>
        <MDBInput
          type="text"
          hint="Search"
          style={{
            color: "#fff",
            padding: "0 10px 8px 30px",
            boxSizing: "border-box"
          }}
        />
        <MDBSideNavNav>
          <MDBSideNavCat
            name="Submit blog"
            id="submit-blog-cat"
            icon="chevron-right"
          >
            <MDBSideNavItem>Submit listing</MDBSideNavItem>
            <MDBSideNavItem>Registration form</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat
            iconRegular
            name="Instruction"
            id="instruction-cat"
            icon="hand-pointer"
          >
            <MDBSideNavItem>For bloggers</MDBSideNavItem>
            <MDBSideNavItem>For authors</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat name="About" id="about-cat" icon="eye">
            <MDBSideNavItem>Instruction</MDBSideNavItem>
            <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat
            name="Contact me"
            id="contact-me-cat"
            icon="envelope"
          >
            <MDBSideNavItem>FAQ</MDBSideNavItem>
            <MDBSideNavItem>Write a message</MDBSideNavItem>
          </MDBSideNavCat>
        </MDBSideNavNav>
      </MDBSideNav>
      <MDBNavbar double expand="md" fixed="top" scrolling>
        <MDBNavbarNav left>
          <MDBNavItem>
            <div
              onClick={this.handleToggleClickA}
              key="sideNavToggleA"
              style={{
                lineHeight: "32px",
                marginRight: "1em",
                verticalAlign: "middle"
              }}
            >
              <MDBIcon icon="bars" color="white" size="2x" />
            </div>
          </MDBNavItem>
          <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
            Material Design for Bootstrap
          </MDBNavItem>
        </MDBNavbarNav>
        <MDBNavbarNav right style={specialCaseNavbarStyles}>
          <MDBNavItem active>
            <MDBNavLink to="#!">
              <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Contact</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBNavLink to="#!">
              <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Support</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBNavLink to="#!">
              <MDBIcon icon="user" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Account</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBDropdown>
              <MDBDropdownToggle nav caret>
                <div className="d-none d-md-inline">Dropdown</div>
              </MDBDropdownToggle>
              <MDBDropdownMenu right>
                <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>
        </MDBNavbarNav>
      </MDBNavbar>
      <main style={mainStyle}>
        <MDBContainer fluid style={{ height: 2000 }} className="mt-5">
          <h2>Advanced Double Navigation with hidden SideNav & fixed Navbar:</h2>
          <br />
          <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
          <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
        </MDBContainer>
      </main>
    </div>
  </Router>
);

} }

export default DoubleNavigationPage;

Blockquote


Piotr Glejzer staff commented 2 years ago

Thanks for your code. I will look into that as soon as possible.


mark-steven-au pro premium commented 2 years ago

Hi Piotr Any updates on a work around for this? Cheers Mark


mark-steven-au pro premium answered 2 years ago

Hi Piotr, Have got this working...to point It works fine now on full view laptop. But on something like Phone or Pad the side bar does not start out by default. Wondering if you maybe had an answer to this?

Cheers Mark Code below to what is working

enter code here

class App extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: true, }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA, }); };

state = { isOpen: !true }; render() { const { isOpen } = this.state; const mainStyle = { paddingTop: "2rem", };

return (
  <Router>
    <div className=" grey lighten-4 ">
      <MDBSideNav
        logo={logo}
        href="/"
        triggerOpening={this.state.toggleStateA}
        bg="./images/sidenav3.jpg"
        mask="strong"
        hidden

Blockquote


mark-steven-au pro premium commented 2 years ago

As an update to this is there an easy way to have the "open on page" load only trigger once per user so it does not keep opening up each time they navigate around pages?


Piotr Glejzer staff commented 2 years ago

did you try load side nav outside the router?


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: 4.23.1
  • Device: laptop
  • Browser: chrom
  • OS: mac
  • Provided sample code: No
  • Provided link: No