import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/fi';
import * as IoIcons from 'react-icons/io'; 
import { Link } from 'react-router-dom';
import '../style/sidebar.css'
import { IconContext } from 'react-icons';
import {AiFillHome ,AiOutlineLogin} from 'react-icons/ai'
import { useHistory } from "react-router-dom";


function Navbar() {
  let history = useHistory();

  const [sidebar, setSidebar] = useState(false);
  const [token  ,  settoken ] = useState(localStorage.getItem("token"))
  const showSidebar = () => setSidebar(!sidebar);
  
  
   function Logout() {
    localStorage.removeItem("token");
     settoken('')
     history.push('/')
  }
  
  return (
    <>
      <IconContext.Provider value={{ color: '#fff' }}>
          <button type="button" class="btn">
              <Link to='#' className='menu-bars'>
            <FaIcons.FaBars color="black" onClick={showSidebar} />
          </Link></button>
        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
          <ul className='nav-menu-items' onClick={showSidebar}>
            <li className='navbar-toggle'>
              <Link to='#' on className='menu-bars_close'>
                <AiIcons.FiX col />
              </Link>
            </li>
            <li className="nav-text">
              
              <Link to="/"><AiFillHome style={{marginRight:"5px"}} />Home</Link>
            </li>
            <li className="nav-text">
            
              <Link to="/dashboard"><IoIcons.IoIosPaper style={{marginRight:"5px"}} />DashBoard</Link>
            </li>
            <li className="nav-text">
              
              <Link onClick={Logout}><AiOutlineLogin style={{marginRight:"5px"}} />  Logout</Link>
            </li>
                       
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;