diff --git a/package-lock.json b/package-lock.json
index 9cb7f0b..fe60949 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2661,17 +2661,17 @@
"resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
"integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
},
- "array-find-index": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
- "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
- },
"array-differ": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
"integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
"dev": true
},
+ "array-find-index": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+ "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+ },
"array-flatten": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -4704,6 +4704,12 @@
}
}
},
+ "csstype": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+ "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==",
+ "dev": true
+ },
"currently-unhandled": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -4712,12 +4718,6 @@
"array-find-index": "^1.0.1"
}
},
- "csstype": {
- "version": "3.0.6",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
- "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==",
- "dev": true
- },
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -9632,6 +9632,11 @@
"pinkie-promise": "^2.0.0"
}
},
+ "get-stdin": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+ "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+ },
"indent-string": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -10295,6 +10300,11 @@
"which": "^1.2.9"
}
},
+ "get-stdin": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+ "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+ },
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -12613,6 +12623,11 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
+ "react-icons": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+ "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -16753,6 +16768,12 @@
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
},
+ "which-pm-runs": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+ "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
+ "dev": true
+ },
"wide-align": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
@@ -16785,12 +16806,6 @@
}
}
},
- "which-pm-runs": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
- "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
- "dev": true
- },
"word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 1310739..4180365 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"semantic-ui-css": "^2.4.1",
diff --git a/public/assets/images/logo-icon.png b/public/assets/images/logo-icon.png
new file mode 100644
index 0000000..ceb3098
Binary files /dev/null and b/public/assets/images/logo-icon.png differ
diff --git a/src/NavigationBar/NavigationBar.scss b/src/NavigationBar/NavigationBar.scss
new file mode 100644
index 0000000..863eb1d
--- /dev/null
+++ b/src/NavigationBar/NavigationBar.scss
@@ -0,0 +1,102 @@
+.navigation-bar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1000;
+ width: 100%;
+ height: 64px;
+ background: #0a0b0c; // TODO: Have a theme with variables for the colors & theme, like $primary
+
+ &__nav {
+ max-width: 1040px; // TODO should be variable : $desktop
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ font-size: 1.3rem;
+ margin: auto;
+ }
+
+ &__general {
+ position: relative;
+ flex: 1 0 auto;
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ margin-right: 10px;
+ padding: 10px 0;
+ font-weight: 500;
+ letter-spacing: 0.2px;
+ text-transform: uppercase;
+ white-space: nowrap;
+ }
+
+ &__logo {
+ padding: 12px 0;
+ margin-right: 32px;
+ display: inline-block;
+ }
+
+ &__logo-img {
+ display: block;
+ width: auto;
+ height: 21px;
+ }
+
+ &__content {
+ list-style: none;
+ display: flex;
+ }
+
+ &__links {
+ list-style: none;
+ display: flex;
+ margin: 0;
+ padding: 0;
+ }
+
+ &__link {
+ display: block;
+ padding: 12px;
+ font-size: 13px;
+ color: #fff;
+ opacity: 0.8;
+ transition: opacity 0.35s ease-in-out;
+
+ // TODO: we should define global styling, no need, currently a is taking colors from semantic-ui
+ a {
+ color: white;
+
+ &:hover {
+ color: white;
+ }
+ }
+
+ &:hover {
+ opacity: 1;
+ color: white;
+ }
+ }
+
+ &__user {
+ flex: 0 1 auto;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px 0;
+ height: 64px;
+ }
+
+ &__user-link {
+ display: inline-block;
+ margin: 0;
+ padding: 10px;
+ opacity: 0.8;
+ font-size: 30px;
+ color: white;
+ cursor: pointer;
+ }
+}
diff --git a/src/NavigationBar/NavigationBar.test.tsx b/src/NavigationBar/NavigationBar.test.tsx
new file mode 100644
index 0000000..044e928
--- /dev/null
+++ b/src/NavigationBar/NavigationBar.test.tsx
@@ -0,0 +1,11 @@
+describe('NavigationBar', () => {
+ test.todo("Should write some basic test for this or remove that if we actually don't need to test");
+ // test("renders the nav bar", () => {
+ // // render();
+ // // const linkElement = screen.getByText(/Paralink Network/i);
+ // // const ipfsLinkElement = screen.getByText(/IPFS/i);
+ // // expect(linkElement).toBeInTheDocument();
+ // // expect(ipfsLinkElement).toBeInTheDocument();
+
+ // });
+});
diff --git a/src/NavigationBar/NavigationBar.tsx b/src/NavigationBar/NavigationBar.tsx
new file mode 100644
index 0000000..83b5597
--- /dev/null
+++ b/src/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { FaUserCircle } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+import './NavigationBar.scss';
+
+export const NavigationBar = (): JSX.Element => {
+ return (
+
+
+
-
+
{props.children}