Created the Navigation component
This commit is contained in:
parent
eea0d244f0
commit
5703758262
35
src/common/components/Navigation/Navigation.jsx
Normal file
35
src/common/components/Navigation/Navigation.jsx
Normal 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;
|
Loading…
x
Reference in New Issue
Block a user