Sidebar with navbar in React


Topic: Sidebar with navbar in React

ppotter10 asked 5 years ago

I'm wondering how I am able to get the navbar working together with the sidebar in React. I have found the instructions for jQuery but they don't fully work with the React version. I also used the TopNavbar with "double", but it seems I'm missing the right parameter for the main content. What am I missing?

Code of sidenav / navbar

import React, { Component } from "react";
import {
  MDBNavbar,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBIcon,
  MDBContainer
} from "mdbreact";
import { BrowserRouter as Router } from "react-router-dom";

class TopNavbar extends Component {
  state = {
    isOpen: false
  };

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

  render() {
    return (
      <Router>
        <MDBNavbar color="deep-purple darken-4" double dark expand="md">
          <MDBNavbarToggler onClick={this.toggleCollapse} />
          <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
            <MDBNavbarNav left>
              <MDBNavItem active>
                <MDBNavLink to="#!">Home</MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                <MDBNavLink to="#!">Features</MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                <MDBNavLink to="#!">Pricing</MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                <MDBDropdown>
                  <MDBDropdownToggle nav caret>
                    <div className="d-none d-md-inline">Dropdown</div>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu className="dropdown-default">
                    <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>
            <MDBNavbarNav right>
              <MDBNavItem>
                <MDBNavLink className="waves-effect waves-light" to="#!">
                  <MDBIcon fab icon="twitter" />
                </MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                <MDBNavLink className="waves-effect waves-light" to="#!">
                  <MDBIcon fab icon="google-plus-g" />
                </MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                <MDBDropdown>
                  <MDBDropdownToggle nav caret>
                    <MDBIcon icon="user" />
                  </MDBDropdownToggle>
                  <MDBDropdownMenu className="dropdown-default">
                    <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>
          </MDBCollapse>
        </MDBNavbar>
      </Router>
    );
  }
}

export default TopNavbar;


import {
  MDBIcon,
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBRow,
  MDBBtn
} from "mdbreact";
import { BrowserRouter as Router } from "react-router-dom";
import Logo from "../../assets/logo-only.png";

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

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

  render() {
    const { isOpen } = this.state;
    return (
      <Router>
        <MDBContainer>
          <MDBSideNav
            logo={Logo}
            fixed
            triggerOpening={isOpen}
            breakWidth={900}
            className="deep-purple darken-4"
          >
            <MDBSideNavNav>
              <MDBSideNavCat name="Items1" id="item1" icon="handshake">
                <MDBSideNavLink>Item</MDBSideNavLink>
                <MDBSideNavLink>Item</MDBSideNavLink>
              </MDBSideNavCat>
              MDBSideNavNav>
          </MDBSideNav>
        </MDBContainer>
      </Router>
    );
  }
}

export default SideNavPage;

Piotr Glejzer staff commented 5 years ago

Do you have some code to show? I don't see anything in examples.


ppotter10 commented 5 years ago

See post up and below. For some reason the snippets are not loading.


Rimsha Ch commented 4 years ago

i don't have pro version of mdbreact installed .then how can I use sidenav .. I'm facing this probelm 'MDBSideNav' is not exported from 'mdbreact'. any sol?


Krzysztof Wilk staff commented 4 years ago

@Rimsha Ch You can find the MDB Sidenav component only in the pro package, so it is not exported from the Free one. If you want to use it - you have to buy the pro.


ppotter10 answered 5 years ago

Here's the main page code:

   import React from "react";
    import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
    import SideNavPage from "../SideNav/SideNav";
    import TopNavbar from "../TopNavBar/TopNavbar";

function DashboardPage() {


  return (
    <>
      <header>
        <SideNavPage />
        <TopNavbar />
      </header>
      <main className="fixed-sn">
        <div>
          <h1>Hello!</h1>
        </div>
      </main>
      <footer></footer>
    </>
  );
}

Piotr Glejzer staff commented 5 years ago

I think this code is looking good. Do you have an example in jQuery to show what you are trying to imitate?


ppotter10 commented 5 years ago

I now followed this code (which is the React one):

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

Turns out, my logo was making the width of the sidebar larger. So changing the padding from 210 px, to 250 made it work.

const navStyle = { paddingLeft: size.width > props.breakWidth ? "250px" : "16px" };

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.1
  • Device: any
  • Browser: Chrome
  • OS: any
  • Provided sample code: No
  • Provided link: No