How do I push content with the react sidenav?

Topic: How do I push content with the react sidenav?

Larry White free asked 5 years ago

I'm trying to make a react sidenav that pushes content when it opens. (I'm using MDB React PRO). All the examples I have seen show the sidenav overlaying the content as it opens. How do I make push work?

Here is an example of a side-nav that pushes.https://bootstrapious.com/tutorial/sidebar/index.html

A second question I have is this: I already have a topNav and want the sidenav to be under it, rather than overlaying it. (it might be ok if the top nav pushes to the right as well, but the top nav is global and the side nav is only for one view so it would be better if it were beneath the top nav, as that would be more representative of it's role in the application.

Konrad Stępień staff commented 5 years ago

As for the second question. Can you make form me a snippet?

Add comment

Larry White free answered 5 years ago

0 0 Best answer

Thank you Konrad, I'm working through modifying my code as you suggest, but have reached a problem. I should have been more clear in my description. I am using

<MDBSideNav slim ...>

It seems to use an inner function to handle expanding and contracting so I don't know where to hang the code you put in handleToggle which seems to handle the content push. Is there anyway to push content when the minimize/maximize button is toggled?

Konrad Stępień staff commented 5 years ago

Hi @Larry White,

I made for you a modified code and we do not have push functionality for this time. But I did forward your suggestion to our team and probably it will be added to React, jQuery, Angular and Vue technologies like a native functionality.

For this time it is hard to make something like this. But maybe the better way is when you send me your code or snippet to try to do it on a finished example?

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi <a href="/profile/?id=26224" target="_blank" rel="nofollow">@Larry White</a>,

Can you try something like this?

App.js

<pre class="prettyprint"><code>import React from "react";
import {
 MDBIcon,
 MDBSideNavCat,
 MDBSideNavNav,
 MDBSideNav,
 MDBSideNavLink,
 MDBContainer,
 MDBBtn
} from "mdbreact";
import { BrowserRouter as Router } from "react-router-dom";
import "./App.css";

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

handleToggle = () => {
    this.setState(
      {
        isOpen: !this.state.isOpen
      },
      () => {
        console.log(this.state.isOpen);
        const move = document.querySelector('.content');
        if (this.state.isOpen) {
          const nav = document.querySelector(".side-nav").offsetWidth;
          console.log(nav);
          move.style.transform = `translateX(${nav}px)`;
          // move.style.marginLeft = `${nav}px`
        } else {
          move.style.transform = `translateX(${0}px)`;
          // move.style.marginLeft = `${0}px`
        }
      }
    );
  };

render() {
 const { isOpen } = this.state;
 return (
 <Router>
 <MDBContainer>
 <MDBContainer className='content'>
 <MDBBtn onClick={this.handleToggle}>
 <MDBIcon icon="bars" size="5x" />
 </MDBBtn>
 </MDBContainer>
 <MDBSideNav
 logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
 hidden
 triggerOpening={isOpen}
 breakWidth={1300}
 className={`deep-purple darken-4 ${
 !this.state.isOpen ? "hide" : ""
 }`}
 fixed
 >
 <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;
</code></pre>

App.css

<pre class="prettyprint"><code>.content {
 transition: 300ms;
}

.side-nav.hide {
 transform: translateX(-100%) !important;
}
</code></pre>

Please insert min. 20 characters.

Hi @Larry White,

Can you try something like this?

App.js

import React from "react";
import {
  MDBIcon,
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBBtn
} from "mdbreact";
import { BrowserRouter as Router } from "react-router-dom";
import "./App.css";

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

  handleToggle = () => {
    this.setState(
      {
        isOpen: !this.state.isOpen
      },
      () => {
        console.log(this.state.isOpen);
        const move = document.querySelector('.content');
        if (this.state.isOpen) {
          const nav = document.querySelector(".side-nav").offsetWidth;
          console.log(nav);
          move.style.transform = `translateX(${nav}px)`;
          // move.style.marginLeft = `${nav}px`
        } else {
          move.style.transform = `translateX(${0}px)`;
          // move.style.marginLeft = `${0}px`
        }
      }
    );
  };

  render() {
    const { isOpen } = this.state;
    return (
      <Router>
        <MDBContainer>
          <MDBContainer className='content'>
            <MDBBtn onClick={this.handleToggle}>
              <MDBIcon icon="bars" size="5x" />
            </MDBBtn>
          </MDBContainer>
          <MDBSideNav
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
            hidden
            triggerOpening={isOpen}
            breakWidth={1300}
            className={`deep-purple darken-4 ${
              !this.state.isOpen ? "hide" : ""
            }`}
            fixed
          >
            <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;

App.css

.content {
  transition: 300ms;
}

.side-nav.hide {
  transform: translateX(-100%) !important;
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.23.0
Device: any
Browser: any
OS: any
Provided sample code: No
Provided link: Yes

Larry White

85Support score
5Questions 6Answers 0Snippets