From 57037582625f64b6ed8d3f197f8c497d65632ef0 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Mon, 12 Sep 2022 00:58:41 +0200
Subject: [PATCH] Created the Navigation component

---
 .../components/Navigation/Navigation.jsx      | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/common/components/Navigation/Navigation.jsx

diff --git a/src/common/components/Navigation/Navigation.jsx b/src/common/components/Navigation/Navigation.jsx
new file mode 100644
index 0000000..caa8a23
--- /dev/null
+++ b/src/common/components/Navigation/Navigation.jsx
@@ -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;
\ No newline at end of file