How do I push content with the react sidenav?


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

Larry White 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?


Konrad Stępień staff answered 5 years ago

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;
}

Larry White answered 5 years ago

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?


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.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: Yes
Tags