Added in navbar and settings route

resources/js/components/Home/HomePage.js

@@ -8,12 +8,14 @@ import TestsTable from '../Graphics/TestsTable';
 import Settings from '../Settings/Settings';
 import Login from '../Login';
 import Authentication from '../Authentication/Authentication';
+import Navbar from '../Navbar';
 
 export default class HomePage extends Component {
 
     render() {
         return (
             <div>
+                <Navbar />
                 <div className="my-4">
                     {(window.config.auth == true && window.authenticated == false) &&
                         <Login />

resources/js/components/Navbar.js

@@ -1,19 +1,65 @@
 import React, { Component } from 'react';
+import {Nav, Navbar as BootstrapNavbar, NavLink as BootstrapNavLink} from 'react-bootstrap';
 import ReactDOM from 'react-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 export default class Navbar extends Component {
     constructor(props) {
         super(props)
 
         this.state = {
-
+            brand: {
+                name: "Speedtest Tracker",
+                url: window.config.base
+            },
+            pages: [
+                {
+                    name: 'Home',
+                    url: window.config.base,
+                    authRequired: false
+                },
+                {
+                    name: 'Settings',
+                    url: window.config.base + 'settings',
+                    authRequired: true
+                }
+            ]
         }
     }
 
+    generateLinks = () => {
+        return this.state.pages.map(page => {
+            if(
+                page.authRequired === false ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth &&
+                    window.authenticated
+                ) ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth === false
+                )
+            ) {
+                return <BootstrapNavLink key={page.url} as={NavLink} to={page.url}>{page.name}</BootstrapNavLink>;
+            }
+        });
+    }
+
     render() {
+        var brand = this.state.brand;
+        var pages = this.generateLinks();
+
         return (
-            <div>
-            </div>
+            <BootstrapNavbar variant="dark" bg="dark">
+                <BootstrapNavbar.Brand as={Link} to={brand.url}>{brand.name}</BootstrapNavbar.Brand>
+                <BootstrapNavbar.Toggle  aria-controls="basic-navbar-nav" />
+                <BootstrapNavbar.Collapse id="basic-navbar-nav">
+                    <Nav className="ml-auto">
+                        {pages}
+                    </Nav>
+                </BootstrapNavbar.Collapse>
+            </BootstrapNavbar>
         );
     }
 }

resources/js/components/Settings/SettingsIndex.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Navbar from '../Navbar';
+
+export default class SettingsIndex extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <Navbar />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsIndex')) {
+    ReactDOM.render(<SettingsIndex />, document.getElementById('settingsIndex'));
+}

resources/js/index.js

@@ -8,6 +8,7 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import HomePage from './components/Home/HomePage';
 import Cookies from 'js-cookie';
+import SettingsIndex from './components/Settings/SettingsIndex';
 
 export default class Index extends Component {
     constructor(props) {
@@ -84,6 +85,12 @@ export default class Index extends Component {
                                         <HomePage />
                                     </div>
                                 )} />
+                                <Route exact path={window.config.base + 'settings'} render={(props) => (
+                                    <div>
+                                        <SettingsIndex />
+
+                                    </div>
+                                )} />
                                 <Route exact path={window.config.base + "error/:code"} render={(props) => ( <ErrorPage code={props.match.params.code} /> )} />
                                 <Route render={(props) => (<ErrorPage code="404" />)} />
                         </Switch>