Skip to content

Commit

Permalink
edit nav bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jxmoose
jxmoose committed May 22, 2024
1 parent 6a30121 commit dfc350e
Showing 1 changed file with 76 additions and 90 deletions.
166 changes: 76 additions & 90 deletions src/components/userComponents/navBar/navBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,110 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { HamburgerMenu, CloseMenu } from '../../../../public/icons';

/**
* @returns The navigation bar for the web app
*/
function NavBar() {
export default function NavBar() {
const [showMenu, setShowMenu] = useState(false);

useEffect(() => {
if (showMenu) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}, [showMenu]);

/**
* Toggles the side menu
*/
function handleClick() {
setShowMenu(!showMenu);
}

/**
* @param event - Close the side menu when the escape key is pressed
*/
function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
if (event.key === 'Escape') {
setShowMenu(false);
}
}

return (
<nav
className="bg-[#4b711d] p-4 flex items-center justify-between z-[9999]"
style={{ padding: '1rem', position: 'sticky', top: 0 }}
>
<Link href="/">
<img
src="https://phs-spca.org/wp-content/uploads/2017/03/PHSLogo.jpg"
alt="Logo"
className="object-contain"
style={{ maxHeight: '100%', maxWidth: '50%' }}
/>
</Link>
<div className="flex-grow" />
<button
type="button"
className="w-10 h-10"
onClick={handleClick}
onKeyDown={handleKeyDown}
tabIndex={0}
aria-label="Menu"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
>
<path
d="M9.58331 13.4167H36.4166"
stroke="white"
strokeWidth="3.83333"
strokeLinecap="round"
<nav className="bg-scary-forest w-full h-[4.25rem] flex flex-col relative z-[9999]">
<div className="flex flex-row justify-between relative top-2">
<Link href="/">
<img
src="https://qkkuacqtcsfjbnzmxmhk.supabase.co/storage/v1/object/public/images/PHSLogo.jpg"
alt="PHSLogo"
className="object-contain w-[6.5rem] h-[2.25rem] relative left-[1.13rem]"
/>
<path
d="M9.58331 23H36.4166"
stroke="white"
strokeWidth="3.83333"
strokeLinecap="round"
/>
<path
d="M9.58331 32.5833H36.4166"
stroke="white"
strokeWidth="3.83333"
strokeLinecap="round"
/>
</svg>
</button>
</Link>
<button
type="button"
className="w-10 h-10 relative right-[0.81rem]"
onClick={handleClick}
aria-label="Toggle Menu"
>
<div className="flex justify-center items-center w-full h-full">
{showMenu ? <CloseMenu /> : <HamburgerMenu />}
</div>
</button>
</div>
<div className="bg-hunterGreen w-full h-[0.375rem] absolute bottom-0" />

{showMenu && (
<div className="fixed top-20 right-0 h-full w-3/5 bg-[#ebf0e4] shadow-lg">
<h1 className="text-xl text-black font-bold p-4">WELCOME</h1>
<ul className="p-4">
<Link href="/" className="block mb-2 text-black">
<div className="bg-[#000000B2] w-full h-full flex justify-end fixed top-[4.25rem]">
<div className="bg-ivory w-[14.9375rem] h-full relative p-[1.31rem]">
<h1 className="text-scary-forest font-lato text-sm font-normal uppercase mt-[1.5rem]">
WELCOME
</h1>
<Link
href="/"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Home
</Link>
</ul>

<h1 className="text-xl text-black font-bold p-4">VISIT</h1>
<ul className="p-4">
<Link href="/hoursAdmissionPage" className="block mb-2 text-black">
Hours & Admission
</Link>
<Link href="/featuredToursPage" className="block mb-2 text-black">
Featured Tours
<h1 className="text-scary-forest font-lato text-sm font-normal uppercase mt-[2.12rem]">
VISIT
</h1>
<Link
href="/hoursAdmissionPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Hours & Location
</Link>
<Link href="/spotlightPage" className="block mb-2 text-black">
Spotlight Tours
<Link
href="/siteMapPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Site Maps
</Link>
<Link href="/siteMapPage" className="block mb-2 text-black">
Site Map
</Link>
<Link href="/exhibitsPage" className="block mb-2 text-black">
<Link
href="/exhibitsPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Exhibits
</Link>
<Link href="/qrCodeTourPage" className="block text-black">
QR Code Tour
</Link>
<Link href="/qrCodeScanner" className="block text-black">
QR Scanner

<h1 className="text-scary-forest font-lato text-sm font-normal uppercase mt-[2.13rem]">
LEARN & EXPLORE
</h1>
<Link
href="/featuredToursPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Virtual Tours
</Link>
</ul>
<h1 className="text-xl text-black font-bold p-4">LEARN & EXPLORE</h1>
<ul className="p-4">
<Link href="/collectionsPage" className="block mb-2 text-black">
Collections
<Link
href="/spotlightPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
Wildlife Spotlights
</Link>
<Link href="/newsFeedPage" className="block mb-2 text-black">
<Link
href="/newsFeedPage"
className="text-night font-lato text-lg font-bold block relative left-4 mt-[1.25rem]"
>
News Feed
</Link>
</ul>
</div>
</div>
)}
</nav>
);
}

export default NavBar;

0 comments on commit dfc350e

Please sign in to comment.