import React from 'react'
import { NavLink } from 'react-router-dom'
import './assets/Navbar.scss'
import logo from './assets/img/logo_tr_bg.png'

export default function Navbar (props) {
  const handleBurger = () => {
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.nav-links')
    const navLinks = document.querySelectorAll('.nav-links li')

    nav.classList.toggle('nav-active')

    // animate links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ''
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${
          index / 7 + 0.5
        }s`
      }
    })

    // burger anim
    burger.classList.toggle('toggle')
  }

  return (
    <nav>
      <div className='brand'>
        <NavLink to='/' exact>
          <img src={logo} className='nav-logo' />
        </NavLink>
      </div>
      <ul className='nav-links'>
        <li>
          {' '}
          <NavLink to='/' exact activeClassName='active-link'>
            Home
          </NavLink>
        </li>
        {/* <li>
          {" "}
          <NavLink to="/about" activeClassName="active-link">
            About
          </NavLink>
        </li> */}
        <li>
          {' '}
          <NavLink to='/meet-olympian' activeClassName='active-link'>
            Meet Olympian
          </NavLink>
        </li>
        <li>
          {' '}
          <NavLink to='/blog' activeClassName='active-link'>
            Blog
          </NavLink>
        </li>
        <li>
          {' '}
          <NavLink to='/sponsors' activeClassName='active-link'>
            Sponsors
          </NavLink>
        </li>
        <li>
          {' '}
          <NavLink to='/contact' activeClassName='active-link'>
            Contact Us
          </NavLink>
        </li>
        {/* <li>
          {" "}
          <NavLink to="/donate" activeClassName="active-link">
            Donate
          </NavLink>
        </li> */}
        <li>
          {' '}
          <NavLink to='/events' activeClassName='active-link'>
            Events
          </NavLink>
        </li>
      </ul>
      <div className='burger' onClick={handleBurger}>
        <div className='line1' />
        <div className='line2' />
        <div className='line3' />
      </div>
    </nav>
  )
}