2022-04-19 20:49:23 +10:00
|
|
|
import React, {Fragment, ReactNode, useState} from "react";
|
2022-05-14 16:47:40 +10:00
|
|
|
import {HiX, HiMenu} from "react-icons/hi"
|
2022-04-16 21:19:04 +10:00
|
|
|
import Head from "next/head";
|
|
|
|
import Link from "next/link";
|
2022-04-19 20:49:23 +10:00
|
|
|
import Image from "next/image";
|
2022-04-24 00:19:38 +10:00
|
|
|
import { ThemeSwitch } from "./themeSwitch";
|
2022-04-16 21:19:04 +10:00
|
|
|
|
2022-04-23 00:46:37 +10:00
|
|
|
|
2022-04-16 21:19:04 +10:00
|
|
|
type Props = {
|
|
|
|
children?: ReactNode
|
|
|
|
title?: string
|
|
|
|
description?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
|
2022-04-19 20:49:23 +10:00
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
2022-09-09 14:02:05 +10:00
|
|
|
|
|
|
|
const handleCheck = () => {
|
|
|
|
setIsOpen(!isOpen);
|
|
|
|
}
|
|
|
|
|
2022-04-16 21:19:04 +10:00
|
|
|
return (
|
2022-05-15 23:33:15 +10:00
|
|
|
<header>
|
2022-04-16 21:19:04 +10:00
|
|
|
<Head>
|
|
|
|
<title>{title}</title>
|
|
|
|
<meta charSet="utf-8" />
|
|
|
|
<meta name="author" content="Nick Bland" />
|
|
|
|
<meta name="description" content={description} />
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
</Head>
|
2022-09-09 14:02:05 +10:00
|
|
|
<div className="navbar dark:bg-black bg-white">
|
|
|
|
<div className="navbar-start">
|
|
|
|
<div className="flex-shrink-0 hidden dark:block">
|
|
|
|
<Image
|
|
|
|
className=""
|
|
|
|
src="/logo-white.svg"
|
|
|
|
alt="logo"
|
|
|
|
height={100}
|
|
|
|
width={100}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="flex-shrink-0 dark:hidden block">
|
|
|
|
<Image
|
|
|
|
className=""
|
|
|
|
src="/logo-black.svg"
|
|
|
|
alt="logo"
|
|
|
|
height={100}
|
|
|
|
width={100}
|
|
|
|
/>
|
2022-04-19 20:49:23 +10:00
|
|
|
</div>
|
2022-05-15 23:33:15 +10:00
|
|
|
</div>
|
2022-09-09 14:02:05 +10:00
|
|
|
<div className="navbar-center lg:hidden">
|
|
|
|
<div className="dropdown">
|
|
|
|
<label tabIndex={0} className="btn btn-ghost swap swap-rotate lg:hidden">
|
|
|
|
<input type="checkbox" checked={isOpen} onChange={handleCheck} />
|
|
|
|
<HiMenu className="block h-6 w-6 swap-off text-gray-400 hover:text-white hover:bg-gray-800" />
|
|
|
|
<HiX className="block h-6 w-6 swap-on text-gray-400 hover:text-white hover:bg-gray-800" />
|
|
|
|
</label>
|
|
|
|
<ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow dark:bg-black bg-white rounded-box w-52">
|
|
|
|
<li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">Home</a></Link></li>
|
|
|
|
<li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">About</a></Link></li>
|
|
|
|
<li><ThemeSwitch /></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="navbar-end">
|
|
|
|
<div className="hidden md:block">
|
|
|
|
<div className="ml-10 flex items-baseline space-x-4">
|
|
|
|
<Link href="/"><a className="dark:text-white text-black">Home</a></Link>
|
|
|
|
<Link href="/"><a className="dark:text-white text-black">About</a></Link>
|
|
|
|
<Link href="/"><a className="dark:text-white text-black">Projects</a></Link>
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
|
|
|
|
<ThemeSwitch />
|
2022-04-19 20:49:23 +10:00
|
|
|
</div>
|
2022-05-15 23:33:15 +10:00
|
|
|
</div>
|
2022-09-09 14:02:05 +10:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-05-15 23:33:15 +10:00
|
|
|
</header>
|
2022-04-16 21:19:04 +10:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default NavBar
|