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 NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<div> <header>
<Head> <Head>
<title>{title}</title> <title>{title}</title>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
@ -24,80 +24,77 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<header> <Disclosure as="nav" className="dark:bg-black bg-white m-0 p-0">
<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="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 justify-between h-16"> <div className="flex items-center">
<div className="flex items-center"> <div className="flex-shrink-0 hidden dark:block">
<div className="flex-shrink-0 hidden dark:block"> <Image
<Image className=""
className="" src="/logo-white.svg"
src="/logo-white.svg" alt="logo"
alt="logo" height={100}
height={100} width={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>
<div className="flex-shrink-0 dark:hidden block"> <div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<Image <ThemeSwitch></ThemeSwitch>
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> </div>
</div> </div>
<div className="-mr-2 flex md:hidden"> </div>
<button <div className="-mr-2 flex md:hidden">
onClick={() => setIsOpen(!isOpen)} <button
type="button" onClick={() => setIsOpen(!isOpen)}
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" 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 ? ( <span className="sr-only">Open Mobile Menu</span>
<HiMenu className="block h-6 w-6" aria-hidden="true" /> {!isOpen ? (
) : ( <HiMenu className="block h-6 w-6" aria-hidden="true" />
<HiX className="block h-6 w-6" aria-hidden="true" /> ) : (
)} <HiX className="block h-6 w-6" aria-hidden="true" />
</button> )}
</div> </button>
</div> </div>
</div> </div>
<Transition show={isOpen} appear={true}> </div>
<Transition.Child <Transition show={isOpen} appear={true}>
<Transition.Child
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95" enter="transition ease-out duration-100 transform"
enterTo="opacity-100 scale-100" enterFrom="opacity-0 scale-95"
leave="transition ease-in duration-75 transform" enterTo="opacity-100 scale-100"
leaveFrom="opacity-100 scale-100" leave="transition ease-in duration-75 transform"
leaveTo="opacity-0 scale-95" leaveFrom="opacity-100 scale-100"
as={Fragment} 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"> <div id="mobile-menu">
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link> <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">About</a></Link> <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
<div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div> <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
</div> <div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
</div> </div>
</Transition.Child> </div>
</Transition> </Transition.Child>
</Disclosure> </Transition>
</Disclosure>
</header>
</header>
</div>
) )
} }