feat(nav menu): Adding nav menu component

src/App.js

@@ -4,7 +4,7 @@
 
 // Global npm libraries
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+// import { Container, Row, Col } from 'react-bootstrap'
 import { useQueryParam, StringParam } from 'use-query-params'
 
 // Local libraries
@@ -16,6 +16,7 @@ import AsyncLoad from './services/async-load'
 import ServerSelect from './components/servers'
 import Footer from './components/footer'
 import GetBalance from './components/balance'
+import NavMenu from './components/nav-menu'
 
 // Default restURL for a back-end server.
 let serverURL = 'https://free-bch.fullstack.cash'
@@ -100,6 +101,7 @@ class App extends React.Component {
       <>
         <GetRestUrl />
         <LoadScripts />
+        <NavMenu />
         {this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} tokens={this.tokenData} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />}
         <ServerSelect />
         <Footer />
@@ -124,15 +126,7 @@ function UninitializedView (props) {
   const heading = 'Loading Blockchain Data...'
 
   return (
-    <Container style={{ backgroundColor: '#ddd' }}>
+    <WaitingModal heading={heading} body={props.modalBody} hideSpinner={props.hideSpinner} />
-      <Row style={{ padding: '25px' }}>
-        <Col>
-          <h1 className='header'>PSF Web3 Demo</h1>
-
-          <WaitingModal heading={heading} body={props.modalBody} hideSpinner={props.hideSpinner} />
-        </Col>
-      </Row>
-    </Container>
   )
 }
 
@@ -140,13 +134,7 @@ function UninitializedView (props) {
 function InitializedView (props) {
   return (
     <>
-      <Container style={{ backgroundColor: '#ddd' }}>
+      <br />
-        <Row style={{ padding: '25px' }}>
-          <Col>
-            <h1 className='header'>PSF Web3 Demo</h1>
-          </Col>
-        </Row>
-      </Container>
       <GetBalance wallet={_this.state.wallet} />
     </>
   )

src/components/nav-menu/index.js

@@ -0,0 +1,58 @@
+/*
+  This component controlls the navigation menu.
+
+  Inspired from this example:
+  https://codesandbox.io/s/react-bootstrap-hamburger-menu-example-rnud4?from-embed
+*/
+
+// Global npm libraries
+import React from 'react'
+import { Nav, Navbar, NavDropdown, Image } from "react-bootstrap"
+import Logo from './psf-logo.png'
+// import { ReactComponent as Logo } from "./psf-logo.png"
+
+class NavMenu extends React.Component {
+  constructor(props) {
+    super(props)
+    console.log('NavMenu')
+  }
+
+  render() {
+    return(
+      <>
+        <Navbar collapseOnSelect expand="xxxl" bg="dark" variant="dark" style={{paddingRight: '20px'}} >
+          <Navbar.Brand href="#home" style={{paddingLeft: '20px'}}>
+            <Image src={Logo} thumbnail width="50" />{' '}
+            PSF Web3 Demo
+          </Navbar.Brand>
+
+          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+          <Navbar.Collapse id="responsive-navbar-nav">
+            <Nav className="mr-auto">
+              <Nav.Link href="#features">Placeholder 1</Nav.Link>
+              <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
+                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+                <NavDropdown.Item href="#action/3.2">
+                  Another action
+                </NavDropdown.Item>
+                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+                <NavDropdown.Divider />
+                <NavDropdown.Item href="#action/3.4">
+                  Separated link
+                </NavDropdown.Item>
+              </NavDropdown>
+            </Nav>
+            <Nav>
+              <Nav.Link href="#deets">Placeholder 2</Nav.Link>
+              <Nav.Link eventKey={2} href="#memes">
+                Placeholder 3
+              </Nav.Link>
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
+      </>
+    )
+  }
+}
+
+export default NavMenu