import React from 'react';
import { Link } from 'react-router-dom';

class Nav extends React.Component {

    state = {
        isVisible: false,
    };

    onClick = () => this.setState(state => ({isVisible: !state.isVisible}));

    render() {
        const css = {
            content: this.state.isVisible ? 'nav__content--is-visible' : '',
            header: this.state.isVisible ? 'nav__is-expanded' : '',
            icon: this.state.isVisible ? nav__menu-icon--close-x : '',
        };
        return (
            <div>
                <header className={`nav ${css.header}`}>
                    <div className="nav__logo ">
                        <img src="assets/images/logo.png" />
                    </div>
                    <div className={`nav__menu-icon ${css.icon}`} onClick={this.onClick}>
                        <div className="nav__menu-icon__middle" />
                    </div>
                    <div className={`nav__content ${css.content}`}>
                        <nav>
                            <ul>
                                <div className="others">
                                    <li>
                                        <a href="#why">Why RIP</a>
                                    </li>
                                    <li>
                                        <a href="#">Sign Up</a>
                                    </li>
                                    <li>
                                        <a href="#">Login</a>
                                    </li>
                                </div>
                            </ul>
                        </nav>
                    </div>
                </header>
            </div>
        );
    }
}

export default Nav;