Created the Navigation component

This commit is contained in:
Mathias Wagner 2022-09-12 00:58:41 +02:00
parent eea0d244f0
commit 5703758262

View File

@ -0,0 +1,35 @@
import "./styles.sass";
import Button from "@/common/components/Button";
import SheepstarSitting from "@/assets/SheepstarSitting.png";
import {Link, NavLink} from "react-router-dom";
const links = [
{name: "Home", to: "/"},
{name: "Features", to: "/features"},
{name: "Coins", to: "/coins"},
{name: "Status", to: "/status"},
{name: "More", to: "/more"},
];
const Navigation = () => {
return (
<header className="header">
<div className="link-area">
<Link to={"/"}><img className="logo" src={SheepstarSitting} alt="Sheepstar Logo"/></Link>
<ul className="links">
{links.map((item) => (
<li key={item.to}><NavLink to={item.to}
className={({isActive}) => (isActive ? "active" : "inactive")}>{item.name}</NavLink>
</li>))}
</ul>
</div>
<div className="dashboard-area">
<Button text="Dashboard"/>
</div>
</header>
);
}
export default Navigation;