62 lines
No EOL
3.2 KiB
TypeScript
62 lines
No EOL
3.2 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link';
|
|
import Logo from "../../public/borb.png"
|
|
|
|
const Header = () => {
|
|
const [navbar, setNavbar] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<header className="font-poppins bg-polar-night-light z-10">
|
|
<div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
|
|
<div>
|
|
<div className="flex items-center justify-between md:block">
|
|
<div className='flex items-center justify-between md:py-3 gap-10'>
|
|
<Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
|
|
<Image src={Logo} width={100} alt='Logo'/>
|
|
</Link>
|
|
</div>
|
|
<div className="md:hidden">
|
|
<button
|
|
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
|
|
onClick={() => setNavbar(!navbar)}>
|
|
{navbar ? (
|
|
<div className="bar text-white"></div>
|
|
) : (
|
|
<div className="close text-white"></div>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className='md:opacity-0 md:pt-3'></hr>
|
|
<div>
|
|
<div
|
|
className={`flex-1 justify-self-center md:block md:pb-0 md:mt-0 ${navbar ? 'p-12 md:p-0 block' : 'hidden'}`}>
|
|
<ul className=" md:h-auto items-center justify-center md:flex">
|
|
<li className="text-xl text-white py-2 my-2 md:my-0 md:px-6 text-center md:border-b-0 border-white hover:text-nord-12 transition duration-250">
|
|
<Link href="/" onClick={() => setNavbar(!navbar)}
|
|
className='sm:px-52 md:px-0'>Home</Link>
|
|
</li>
|
|
|
|
<li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-white hover:text-nord-12 transition duration-250">
|
|
<Link href="/blog" onClick={() => setNavbar(!navbar)}
|
|
className='sm:px-52 md:px-0'>Blog</Link>
|
|
</li>
|
|
|
|
<li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-white hover:text-nord-12 transition duration-250">
|
|
<Link href="/contact" onClick={() => setNavbar(!navbar)}
|
|
className='sm:px-48 md:px-0'>Contact</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</>
|
|
)
|
|
}
|
|
export default Header |