yoda-common-boilerplate/src/molecules/Navigation/Navigation.jsx

Repository of all JCP reusable atoms, molecules and organisms

import React, { Component } from 'react';
import styles from './Navigation.css';

class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

  toggleMenu(menuState) {

    switch (menuState) {
      case 1:
        this.setState({
          isOpen: true
        });
        break;

      case 0:
        this.setState({
          isOpen: false
        });
        break;

      default:
        break;

    }//end of switch


  }

  render() {

    let navigationToggle = styles.verticleNavigation;

    if (this.state.isOpen === true) {
      navigationToggle = styles.verticleNavigation + ' ' + styles.visible;
    }

    return (
      <div>
        <a className={styles.menuLink} href="javascript:void(0);" onClick={this.toggleMenu.bind(this, 1)} />

        <nav className={navigationToggle}>
          <div className={styles.menuWrapper}>

            <a href="javascript:void(0);" onClick={this.toggleMenu.bind(this, 0)} className={styles.menuWrapperClose}>
                Shop Departments
            </a>

            <ul className={styles.menuList}>
              <li className={styles.menuListItem}>
                <a href="javascript:void(0);" className={styles.menuListItemLink}> For The Home </a>
                <a href="javascript:void(0);" className={styles.menuListItemLink}> Bed & Bath </a>
                <a href="javascript:void(0);" className={styles.menuListItemLink}> Window </a>
                <a href="javascript:void(0);" className={styles.menuListItemLink}> Men </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}
export default Navigation;