Change navbar to sit inside of header tag

Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
This commit is contained in:
Nick Bland 2022-05-15 23:33:15 +10:00
parent cca535bcd8
commit 13ab78bf2a
No known key found for this signature in database
GPG Key ID: B46CF88E4DAB4A2C

View File

@ -16,7 +16,7 @@ type Props = {
const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<header>
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
@ -24,8 +24,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<meta name="description" content={description} />
<link rel="icon" href="/favicon.ico" />
</Head>
<header>
<Disclosure as="nav" className="dark:bg-black bg-white">
<Disclosure as="nav" className="dark:bg-black bg-white m-0 p-0">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
@ -51,6 +50,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<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></ThemeSwitch>
@ -94,10 +94,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
</Transition.Child>
</Transition>
</Disclosure>
</header>
</div>
)
}