Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- this.toggleNav = this.toggleNav.bind(this)
- import React from "react";
- import ReactDOM from "react-dom";
- import ScrollspyNav from "react-scrollspy-nav";
- import autoBind from 'react-autobind';
- export default class Navigation extends React.Component {
- constructor(props) {
- super(props);
- autoBind(this);
- this.state = {
- toggleMobileNav: false
- };
- }
- toggleNav() {
- this.setState((prev, props) => {
- return {
- toggleMobileNav: !prev.toggleMobileNav
- }
- });
- }
- render() {
- return(
- <ScrollspyNav
- scrollTargetIds={["page-top", "about", "projects", "signup"]}
- activeNavClass="is-active"
- scrollDuration="1000"
- headerBackground="false"
- activeNavClass="active-nav"
- >
- <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
- <div className="container">
- <a id="page-top" className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
- <button className="navbar-toggler navbar-toggler-right" onClick={this.toggleNav} type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
- Menu
- <i className="fas fa-bars"></i>
- </button>
- <div className= {this.state.toggleMobileNav ? "show collapse navbar-collapse" : " " + 'collapse navbar-collapse'} id="navbarResponsive">
- <ul className="navbar-nav ml-auto">
- <li className="nav-item">
- <a className="nav-link" href="#about">About</a>
- </li>
- <li className="nav-item">
- <a className="nav-link" href="#projects">Projects</a>
- </li>
- <li className="nav-item">
- <a className="nav-link" href="#signup">Contact</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- </ScrollspyNav>
- )
Add Comment
Please, Sign In to add comment