SHARE
TWEET

Untitled

a guest Sep 15th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. export default class Navbar extends Component {
  2.   state = {
  3.     toggleOpen: false,
  4.     css: "collapse navbar-collapse",
  5.     links: [
  6.       {
  7.         id: 1,
  8.         path: "/",
  9.         text: "home",
  10.       },
  11.       {
  12.         id: 2,
  13.         path: "/about",
  14.         text: "about",
  15.       },
  16.     ],
  17.   }
  18.  
  19.   toggleHandler = () => {
  20.     this.state.toggleOpen
  21.       ? this.setState({ toggleOpen: false, css: "collapse navbar-collapse" })
  22.       : this.setState({
  23.           toggleOpen: true,
  24.           css: "collapse navbar-collapse show",
  25.             //when "show" the navbar will shown horizontally
  26.         })
  27.   }
  28.  
  29.   render() {
  30.     return (
  31.       <nav className="navbar navbar-expand-sm navbar-light bg-light">
  32.         <Link to="/" className="navbar-brand">
  33.           <img src={logo} alt="logo" />
  34.         </Link>
  35.         <button
  36.           className="navbar-toggler"
  37.             //this is the toggle botton
  38.           type="button"
  39.           onClick={this.toggleHandler}
  40.         >
  41.           <span className="navbar-toggler-icon"></span>
  42.         </button>
  43.         <div className={this.state.css}>
  44.           <ul className="navbar-nav mx-auto">
  45.             {this.state.links.map(link => {
  46.               return (
  47.                 <li key={link.id} className="nav-item">
  48.                   <Link to={link.path} className="nav-link text-capitalize">
  49.                     {link.text}
  50.                   </Link>
  51.                 </li>
  52.               )
  53.             })}
  54.             <Link to="" className="nav-item mt-2 ml-4 cart-icon">
  55.               <FaCartArrowDown />
  56.             </Link>
  57.           </ul>
  58.         </div>
  59.       </nav>
  60.     )
  61.   }
  62. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top