web-portfolio/components/layout/layout-header.tsx

'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-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
                                    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="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
                                          className='sm:px-48 md:px-0'>GitLab</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