From 43234c05c98e87f1ce5260f95b601fe4f2a7ae65 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Thu, 10 Jun 2021 02:46:34 -0400
Subject: [PATCH] Added navbar component

---
 src/App.css   |  2 +-
 src/App.jsx   | 15 ++-------------
 src/Navbar.js | 19 +++++++++++++++++++
 3 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/Navbar.js

diff --git a/src/App.css b/src/App.css
index 13c8e37..dc55806 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,7 +23,7 @@ a:hover {
   color: var( --main);
 }
 
-.header {
+.navbar {
   width: 100%;
   display: flex;
   justify-content: space-between;
diff --git a/src/App.jsx b/src/App.jsx
index b5d1a76..be49411 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import * as Bowser from 'bowser';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+import Navbar from './Navbar';
 import './App.css';
 
 const updateDOM = (id, text) => {
@@ -64,17 +63,7 @@ const App = () => {
 
   return (
     <div className="App">
-      <div className="header">
-        <div className="logoImage" />
-        <div className="menu">
-          <a href="url" target="_blank">
-            <FontAwesomeIcon icon={faExternalLinkAlt} size="lg" />
-          </a>
-          <a href="url" target="_blank">
-            <FontAwesomeIcon icon={faCog} size="lg" />
-          </a>
-        </div>
-      </div>
+      <Navbar />
       <table>
         <col className="column-one" />
         <div className="title">Connection</div>
diff --git a/src/Navbar.js b/src/Navbar.js
new file mode 100644
index 0000000..1399067
--- /dev/null
+++ b/src/Navbar.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+
+const Navbar = () => (
+  <div className="navbar">
+    <div className="logoImage" />
+    <div className="menu">
+      <a href="url" target="_blank">
+        <FontAwesomeIcon icon={faExternalLinkAlt} size="lg" />
+      </a>
+      <a href="url" target="_blank">
+        <FontAwesomeIcon icon={faCog} size="lg" />
+      </a>
+    </div>
+  </div>
+);
+
+export default Navbar;