35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { Link } from "react-router-dom";
|
|
import BannerLogo from "./images/banner.png";
|
|
import SmallLogo from "./images/logo.png";
|
|
import "./css/NavBar.css";
|
|
import Button from "./Button";
|
|
import LinkButton from "./LinkButton";
|
|
|
|
export default function Navbar(props) {
|
|
const navbarItems = props.items;
|
|
return (
|
|
<nav>
|
|
<Link to="/">
|
|
<img className="navbar-logo" id="banner-logo" src={BannerLogo} alt="Parandum Logo" />
|
|
<img className="navbar-logo" id="small-logo" src={SmallLogo} alt="Parandum Logo" />
|
|
</Link>
|
|
|
|
{ navbarItems ?
|
|
<div className="navbar-items">
|
|
{navbarItems.map((item, index) => {
|
|
if (item.type === "link") {
|
|
return <LinkButton className={`${item.hideTextMobile ? "button--hide-text-mobile" : ""} ${item.icon && !item.name ? "button--round" : ""}`} key={index} to={item.link} icon={item.icon}>{item.name}</LinkButton>
|
|
} else if (item.type === "button") {
|
|
return <Button className={`${item.hideTextMobile ? "button--hide-text-mobile" : ""} ${item.icon && !item.name ? "button--round" : ""}`} key={index} onClick={item.onClick} icon={item.icon}>{item.name}</Button>
|
|
}
|
|
return false;
|
|
})}
|
|
</div>
|
|
:
|
|
""
|
|
}
|
|
</nav>
|
|
)
|
|
}
|