{"size": 2405, "ext": "js", "max_stars_repo_path": "src/Components/NavMenu.js", "max_stars_repo_name": "jgold3/data-structures-game", "max_stars_repo_stars_event_min_datetime": "2020-09-28T00:55:05.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-23T06:32:13.000Z", "max_issues_repo_path": "src/Components/NavMenu.js", "max_issues_repo_name": "jgold3/data-structures-game", "max_issues_repo_issues_event_min_datetime": "2020-09-23T21:13:10.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-10T14:26:16.000Z", "max_forks_repo_path": "src/Components/NavMenu.js", "max_forks_repo_name": "Plongesam/data-structures-game", "max_forks_repo_forks_event_min_datetime": "2021-02-16T19:38:56.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-23T06:33:06.000Z"}
{"max_stars_count": 4, "max_issues_count": 156, "max_forks_count": 4, "avg_line_length": 33.4027777778, "max_line_length": 168, "alphanum_fraction": 0.5476091476}
import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import nick from './nick.png'
import "./styles.css";

//this child component is called in Header compoment to be displayed on every page
function NavMenu(){
    //react hook to click and expand/minimize menu
    //conditional rendering:show html only when state is true
    const [showMenu, setShowMenu] = useState(false)

    //MENU initialized to null
    //MASKMENU toggles the menu to visible/invisible when menu button is clicked
    let menu
    let menuMask
    if(showMenu){
        menu= 
        <div
        className="fixed bg-gray-200 top-0 right-0 w-1/6 h-3/5 z-50 shadow-2xl rounded-2xl">
        <div class="dropdown">
  
        <ul class='nav-links'>
                <li>
                    <a className="space-y-20 text-lg py-3 border-t border-b block text-center font-semibold text-gray-800 mb-2" href='/'>Home</a>
                </li>
                <li>
                    <a className="space-y-20 text-lg py-3 border-t border-b block text-center font-semibold text-gray-800 mb-2" href='/profile_page'>Profile & Login</a>
                </li>
                <li>
                    <a className="space-y-20 text-lg py-3 border-t border-b block text-center font-semibold text-gray-800 mb-2" href='/register'>Register</a>
                </li>
                <li>
                    <a className="space-y-20 text-lg py-3 border-t border-b block text-center font-semibold text-gray-800 mb-2" href='/tutorial'>Tutorials</a>
                </li>
        </ul>

        </div>

        <div class="col-lg-6 col-md-6" style={{'align-self':'flex-end'}}>
            <img src={nick} alt={"nick"} />
        </div>
        
        </div>
        
        menuMask=
        <div className="bg-black-t-50 fixed top-0 left-0 w-full h-full z-50"
            onClick={() => setShowMenu(false)}
        >  

        </div>
    }
    //import icon and toggle menu when icon is clicked via react hooks
    return(
        <header>
        <nav>
           
                <FontAwesomeIcon 
                icon={faBars} size="lg"
                onClick={() => setShowMenu(!showMenu)}
                />
            
            {menuMask}
            {menu}
        </nav>
        </header>
    )
}
export default NavMenu


