version 11: minor css changes and draft app dashboard

src/component/AppDashboard.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+
+class AppDashboard extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { show } = this.props;
+        return (
+            <div>
+                {/* <Alert show={show} variant="success">
+                    <Alert.Heading>Application Status</Alert.Heading>
+                    <p>
+                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+                        lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
+                        fermentum.
+                    </p>
+                    <hr />
+                    <div className="d-flex justify-content-end">
+                        <Button onClick={() => this.props.closeAppStatus()} variant="outline-success">
+                            Close me!
+                        </Button>
+                    </div>
+                </Alert> */}
+
+                <Modal show={show} onHide={() => this.props.closeAppStatus()} animation={false}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Application Status</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                    <label>Stocks Latest Nav Date: </label>
+                    <span>
+                        100.5
+                    </span>
+                    <label>Mutual Fund Latest Nav Date: </label>
+                    <span>
+                        100.5
+                    </span>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={() => this.props.closeAppStatus()}>
+                            Close
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+            </div>
+        );
+    }
+
+}
+
+export default AppDashboard;

src/component/MyHeader.jsx

@@ -1,15 +1,19 @@
 import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as utils from './Utils'
+import Button from 'react-bootstrap/Button'
+import AppDashboard from './AppDashboard';
 
 class MyHeader extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       totalNetworth: null,
-      totalNetworthChange: null
+      totalNetworthChange: null,
+      show: false
     }
+    this.closeAppStatus = this.closeAppStatus.bind(this);
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -23,9 +27,21 @@ class MyHeader extends Component {
     return { totalNetworth: totalNetworth, totalNetworthChange: totalNetworthChange };
   }
 
+  closeAppStatus() {
+    this.setState({
+      show: false
+    });
+  }
+
+  showAppStatus() {
+    this.setState({
+      show: true
+    });
+  }
+
 
   render() {
-    const { totalNetworth, totalNetworthChange } = this.state;
+    const { totalNetworth, totalNetworthChange, show } = this.state;
     let icon;
     if (totalNetworthChange < 0) {
       icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1" />
@@ -55,6 +71,10 @@ class MyHeader extends Component {
               {icon}
             </span>
           </div>
+          <div className="col">
+            <Button onClick={() => this.showAppStatus()} variant="outline-success">App Status!</Button>
+            <AppDashboard show={show} closeAppStatus={this.closeAppStatus.bind(this)}/>
+          </div>
         </div>
 
       </nav>

src/component/MySidebar.jsx

@@ -45,7 +45,7 @@ class MySidebar extends Component {
         const { links } = this.state;
         return (
             <nav className="col-md-2 bg-light sidebar">
-                <div className="sidebar-sticky">
+                <div>
                     <ul className="nav flex-column">
                         {links.map((link, i) =>
                             <NavLink