Merge pull request #20 from ZiyedB/ISSUE-12-NavigationBar

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",

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;
+  }
+}

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(<NavigationBar />);
+  //   // const linkElement = screen.getByText(/Paralink Network/i);
+  //   // const ipfsLinkElement = screen.getByText(/IPFS/i);
+  //   // expect(linkElement).toBeInTheDocument();
+  //   // expect(ipfsLinkElement).toBeInTheDocument();
+
+  // });
+});

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 (
+    <div className="navigation-bar">
+      <nav className="navigation-bar__nav">
+        <div className="navigation-bar__general">
+          <Link className="navigation-bar__logo" to="/">
+            <img className="navigation-bar__logo-img" src="/assets/images/logo-icon.png" alt="Paralink Network" />
+          </Link>
+          <div className="navigation-bar__content">
+            <ul className="navigation-bar__links">
+              <li className="navigation-bar__link">
+                <Link to="/ipfs">Paralink Network</Link>
+              </li>
+              <li className="navigation-bar__link">
+                <Link to="/ipfs">IPFS</Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="navigation-bar__user">
+          {/* TODO: Need to be a user page */}
+          <a className="navigation-bar__link navigation-bar__user-link" href="/">
+            <FaUserCircle />
+          </a>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export default NavigationBar;

src/NavigationBar/index.ts

@@ -0,0 +1 @@
+export * from './NavigationBar';

src/layouts/BaseLayout.tsx

@@ -1,7 +1,6 @@
-import { Container, Menu } from 'semantic-ui-react';
-
-import { Link } from 'react-router-dom';
+import { Container } from 'semantic-ui-react';
 import React, { ReactNode } from 'react';
+import { NavigationBar } from '../NavigationBar';
 
 interface BaseLayoutProps {
   children: any;
@@ -10,16 +9,7 @@ interface BaseLayoutProps {
 function BaseLayout(props: BaseLayoutProps): ReactNode {
   return (
     <div>
-      <Menu fixed="top" inverted>
-        <Container>
-          <Menu.Item header>
-            <Link to="/ipfs">Paralink Network</Link>
-          </Menu.Item>
-          <Menu.Item>
-            <Link to="/ipfs">IPFS</Link>
-          </Menu.Item>
-        </Container>
-      </Menu>
+      <NavigationBar />
 
       <Container textAlign="left" style={{ marginTop: '7em' }}>
         {props.children}