text: import React, { Component } from 'react'
  import logo from '../images/logo.svg'
  import {Link} from 'react-router-dom'
  import {FaAlignRight} from 'react-icons/fa'
  
  export default class Navbar extends Component {
    constructor(props) {
      super(props)
      this.state = {
        isOpen: false,
      }
    }
  
    handleToggle = () => {
      this.setState({isOpen: !this.state.isOpen})
    }
  
    render() {
      return (
        <nav className='navbar'>
          <div className='nav-center'>
            <div className='nav-header'>
              <Link to='/'>
                <img src={logo} alt='logo'/>
              </Link>
              <button className='nav-btn' 
              onClick={this.handleToggle}>
                <FaAlignRight className='nav-icon'/>
              </button>
            </div>
            <ul className={this.state.isOpen ? 
              'nav-links show-nav' : 'nav-links'}>
                <li>
                  <Link to='/'>Home</Link>
                </li>
                <li>
                  <Link to='/rooms'>Rooms</Link>
                </li>
            </ul>
          </div>
          <div 
            className="backdrop"
            onClick={this.handleToggle}
            style={
              this.state.isOpen ? 
              {
                zIndex: '1',
                left: '0',
                top: '167px',
                width: '100%',
                height: '100vh',
                display: 'block',
                position: 'absolute',
                backgroundColor: 'rgba(0, 0, 0, 0.3)',
              } 
              : {
                display: 'none'
              }
            }
            />
        </nav>
      )
    }
  }
  