NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change navbar to sit inside of header tag

Browse Source 
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
1 changed files with 66 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
components/navbar.tsx
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,80 +24,77 @@ 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">
<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">
<div className="flex-shrink-0 hidden dark:block">
<Image
className=""
src="/logo-white.svg"
alt="logo"
height={100}
width={100}
/>
<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">
<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}
/>
</div>
<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-shrink-0 dark:hidden block">
<Image
className=""
src="/logo-black.svg"
alt="logo"
height={100}
width={100}
/>
</div>
<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>
</div>
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<ThemeSwitch></ThemeSwitch>
</div>
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<ThemeSwitch></ThemeSwitch>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">Open Mobile Menu</span>
{!isOpen ? (
<HiMenu className="block h-6 w-6" aria-hidden="true" />
) : (
<HiX className="block h-6 w-6" aria-hidden="true" />
)}
</button>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">Open Mobile Menu</span>
{!isOpen ? (
<HiMenu className="block h-6 w-6" aria-hidden="true" />
) : (
<HiX className="block h-6 w-6" aria-hidden="true" />
)}
</button>
</div>
</div>
<Transition show={isOpen} appear={true}>
<Transition.Child
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
as={Fragment}
>
<div id="mobile-menu">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
<div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
</div>
</div>
<Transition show={isOpen} appear={true}>
<Transition.Child
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
as={Fragment}
>
<div id="mobile-menu">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
<div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
</div>
</Transition.Child>
</Transition>
</Disclosure>
</header>
</div>
</div>
</Transition.Child>
</Transition>
</Disclosure>
</header>
)
}