import React from 'react'
import Link from 'next/link'
import '@/app/components/Navbar.css'
const Navbar = ({open}) => {

      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
      }
  return (
    <div id="mySidenav" className="sidenav" style={{}}>
        <div className="row" style={{justifyContent: 'space-between', padding: '10px', flexDirection: 'row', alignItems: 'center', display: 'flex'}}>
            <span>Menu Bar</span>
        <span href="#" className="closebtn" onClick={closeNav}>×</span>
            </div>
        <div className="line"></div>
        <h3 style={{marginBottom: '10px'}}>Routes</h3>
        <Link className="btn2" style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}} href="/"><i className="animation"></i>Home<i className="animation"></i></Link>
        {/* <!--<Link onclick="scrollDown()">Download</Link>--> */}
        <Link className='btn2' style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}}  href="/api"><i className="animation"></i>API<i className="animation"></i></Link>
        <Link className='btn2' style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}} href="/Linkbout"><i className="animation"></i>About<i className="animation"></i></Link>
        <Link className='btn2' style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}} href="/support"><i className="animation"></i>Support<i className="animation"></i></Link>
        
        <div className="line"></div>
        <h3 style={{marginBottom: '10px'}}>Authenticate</h3>
        <Link className='btn2' style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}} href="/login"><i className="animation"></i>Login<i className="animation"></i></Link>
        <Link className='btn2' style={{marginBottom: '10px', backgroundColor: 'black', color: 'white'}} href="/signup"><i className="animation"></i>Sign UP<i className="animation"></i></Link>
        <hr></hr>
      </div>
  )
}

export default Navbar;