79 lines
2.9 KiB
JavaScript
79 lines
2.9 KiB
JavaScript
import React, {useContext, useEffect, useState} from 'react';
|
|
import {Link} from "react-router-dom";
|
|
import {AuthContext} from "../App";
|
|
|
|
const pathsCenter = [
|
|
{name: "All Data", to: "/all", extra: ""},
|
|
{name: "Upload Data", to: "/upload", extra: ""},
|
|
{name: "My Data", to: "/mydata", extra: ""},
|
|
]
|
|
|
|
const pathsGuest = [
|
|
{name: "Log In", to: "/login", extra: ""},
|
|
{name: "Sign Up", to: "/register", extra: "rounded-full border border-white px-4 pb-1 pt-1 inline-block"},
|
|
]
|
|
|
|
const pathsLoggedIn = [
|
|
{name: "Account", to: "/account", extra: ""},
|
|
{name: "Logout", to: "/logout", extra: ""},
|
|
]
|
|
|
|
const pathsAdmin = [
|
|
{name: "Admin", to: "/admin", extra: ""},
|
|
{name: "Account", to: "/account", extra: ""},
|
|
{name: "Logout", to: "/logout", extra: ""},
|
|
]
|
|
|
|
function Navbar({color = "text-white", hover = "hover:border-white"}) {
|
|
const [showDropdown, setDropdown] = useState(false)
|
|
const [userPaths, setUserPaths] = useState(pathsGuest)
|
|
const {authState} = useContext(AuthContext)
|
|
|
|
useEffect(() => {
|
|
console.log(authState)
|
|
if (authState.loggedIn) {
|
|
if (authState.admin) setUserPaths(() => pathsAdmin)
|
|
else setUserPaths(() => pathsLoggedIn)
|
|
|
|
} else setUserPaths(() => pathsGuest)
|
|
}, [authState])
|
|
|
|
return <header className={"lg:flex lg:justify-between lg:items-center px-4 py-3 w-full mt-2 " + color}>
|
|
<div className="flex flex-1 justify-between items-center mt-3 self-start">
|
|
<Link to={"/"}>
|
|
<h1 className="text-xl font-bold">RainTrack</h1>
|
|
</Link>
|
|
<button onClick={() => setDropdown(!showDropdown)}
|
|
className="px-2 py-1 lg:hidden block border border-white rounded-md cursor-pointer">
|
|
<svg className="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 20 20"><title>Toggle Navigation</title>
|
|
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<LinksContainer flex="lg:justify-center flex-2"
|
|
dropDown={showDropdown} paths={pathsCenter} color={color} hover={hover}/>
|
|
|
|
<LinksContainer flex="lg:justify-end flex-1"
|
|
dropDown={showDropdown} paths={userPaths} color={color} hover={hover}/>
|
|
|
|
</header>;
|
|
}
|
|
|
|
function LinksContainer(props) {
|
|
return <div
|
|
className={`lg:px-2 lg:pt-2 lg:pb-4 lg:flex lg:p-0 ${props.flex} ${props.dropDown ? "block" : "hidden"}`}>
|
|
{props.paths.map(path => <Link to={path.to} key={path.name}>
|
|
<div
|
|
className={`lg:px-2 py-1 lg:mx-1 mt-1 block text-left font-semibold border-b-2 border-transparent
|
|
${props.hover} ${path.extra}`}>
|
|
{path.name}
|
|
</div>
|
|
</Link>)}
|
|
</div>
|
|
}
|
|
|
|
export default Navbar;
|
|
|