brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

improve header view

Browse Source
This commit is contained in:
Brandon Egger 2023-03-15 22:56:14 -05:00
parent 92ff6e382b
commit 68320ac9d9
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Header.tsx
View File

@ -1,17 +1,20 @@
import { type NextPage } from "next"; import { type NextPage } from "next";
import Image from 'next/image'; import Image from 'next/image';
import Link from "next/link"; import Link from "next/link";
import { ChevronDownIcon } from '@heroicons/react/24/outline';
interface NavBarLinkProps { interface NavBarLinkProps {
href: string; href: string;
label: string; label: string;
dropdown?: boolean;
} }
const NavBarLink = ({href, label}: NavBarLinkProps) => { const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => {
return ( return (
<li> <li>
<Link href={href}> <Link href={href} className="space-x-[4px] flex flex-row">
<span className="inline-block py-2">{label}</span> <span className="font-bold text-lg py-2">{label}</span>
{dropdown ? <ChevronDownIcon className="w-4"/> : <></>}
</Link> </Link>
</li> </li>
); );
@ -19,18 +22,18 @@ const NavBarLink = ({href, label}: NavBarLinkProps) => {
const NavBar = () => { const NavBar = () => {
return ( return (
<nav className="bg-amber-400 flex flex-row justify-between px-4"> <nav className="bg-yellow-400 w-full drop-shadow-md">
<ul id="left-nav-links" className="flex flex-row space-x-4"> <li className="mx-auto max-w-5xl flex flex-row sm:justify-between px-4">
<NavBarLink href='/' label='Home'/> <ul id="left-nav-links" className="flex flex-row space-x-10">
<NavBarLink href='/' label='Resources'/> <NavBarLink href='/' label='Home'/>
<NavBarLink href='/' label='About'/> <NavBarLink dropdown href='/' label='Resources'/>
</ul> <NavBarLink href='/' label='About'/>
</ul>
<ul id="right-nav-links" className="flex flex-row space-x-4"> <ul id="right-nav-links" className="hidden sm:flex flex-row space-x-4">
<NavBarLink href='/' label='Home'/> <NavBarLink href='/' label='Contact Us'/>
<NavBarLink href='/' label='Home'/> </ul>
<NavBarLink href='/' label='Contact Us'/> </li>
</ul>
</nav> </nav>
) )
} }
@ -41,11 +44,8 @@ const Header: NextPage = () => {
<div> <div>
<Image alt="Ear listening" src="listening-ear.svg" width={64} height={64}/> <Image alt="Ear listening" src="listening-ear.svg" width={64} height={64}/>
</div> </div>
<div id="header-title" className="grow grid place-items-center"> <div id="header-title" className="w-64 grid place-items-center">
<h1 className="text-center text-xl font-bold">Center for Auditory Training Resources</h1> <h1 className="text-center text-2xl font-bold">Center for Auditory Training Resources</h1>
</div>
<div>
<Image alt="Ear listening" src="listening-ear.svg" width={64} height={64}/>
</div> </div>
</div> </div>
<NavBar/> <NavBar/>