Added navbar component
This commit is contained in:
parent
9e5a89fe1a
commit
43234c05c9
3 changed files with 22 additions and 14 deletions
|
|
@ -23,7 +23,7 @@ a:hover {
|
||||||
color: var( --main);
|
color: var( --main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.navbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
15
src/App.jsx
15
src/App.jsx
|
|
@ -1,8 +1,7 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import * as Bowser from 'bowser';
|
import * as Bowser from 'bowser';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import Navbar from './Navbar';
|
||||||
import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
const updateDOM = (id, text) => {
|
const updateDOM = (id, text) => {
|
||||||
|
|
@ -64,17 +63,7 @@ const App = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<div className="header">
|
<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>
|
|
||||||
<table>
|
<table>
|
||||||
<col className="column-one" />
|
<col className="column-one" />
|
||||||
<div className="title">Connection</div>
|
<div className="title">Connection</div>
|
||||||
|
|
|
||||||
19
src/Navbar.js
Normal file
19
src/Navbar.js
Normal file
|
|
@ -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;
|
||||||
Loading…
Add table
Reference in a new issue