File size: 1,908 Bytes
d04e364 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
"use client"
import React from 'react'
import Link from 'next/link'
import { GiRobotGrab } from "react-icons/gi";
import '@/app/components/Header.css'
import Navbar from '@/app/components/Navbar'
import Cookies from 'js-cookie';
const Header = () => {
const [open, setOpen] = React.useState(false)
const [loggedIn, setLoggedIn] = React.useState(false)
React.useEffect(() => {
Cookies.get('UserID') ? setLoggedIn(true) : setLoggedIn(false)
}, [])
function openNav() {
setOpen(true)
document.getElementById("mySidenav").style.width = "250px";
}
return (
<div className='flex-row header' style={{ width: '100%',justifyContent: 'space-between', alignItems: 'center', padding: '10px'}}>
<span onClick={()=>window.location.href = '/'} className='gradient-text' style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', fontSize: '20px'}}><GiRobotGrab size={25} color='#00c8ff'/>TS API</span>
<div className="menubtn gradient-text" style={{cursor: 'pointer'}} onClick={openNav}>☰ Menu</div>
<Navbar open={open} />
<div className="links" style={{justifyContent: 'space-between', padding: '10px'}}>
<Link href='/About'>About</Link>
<Link href='/About'>Docs</Link>
<Link href='/api'>API</Link>
<Link href='/Contact'>Contact</Link>
</div>
<div className="links" style={{justifyContent: 'space-between', padding: '10px'}}>
{loggedIn?<Link className='btn2' href='/api' style={{marginLeft: '10px' ,padding: '10px', borderRadius: '10px'}}><i className="animation"></i>DASHBOARD<i className="animation"></i></Link> :<Link className='btn2' href='/api' style={{marginLeft: '10px' ,padding: '10px', borderRadius: '10px'}}><i className="animation"></i>Get started<i className="animation"></i></Link>}
</div>
</div>
)
}
export default Header |