goodbye old uwufier :cry:

1 files changed, 50 insertions, 0 deletions

diff --git a/client/src/components/navigation/NavigationBar.js b/client/src/components/navigation/NavigationBar.js
new file mode 100644
index 0000000..3962aae
--- /dev/null
+++ b/client/src/components/navigation/NavigationBar.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import {
+    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBIcon,
+    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBCol
+} from 'mdbreact'
+import PropTypes from 'prop-types';
+
+export default class NavigationBar extends Component {
+    state = {
+        isOpen: false
+    };
+    
+    toggleCollapse() {
+        this.setState({ isOpen: !this.state.isOpen });
+    }
+    
+    render() {
+        return(
+            <MDBNavbar color="black" dark expand="md">
+                <MDBNavbarBrand>
+                    <strong className="white-text">Bot Dashboard</strong>
+                </MDBNavbarBrand>
+                <MDBNavbarToggler onClick={this.toggleCollapse} />
+                <MDBCollapse id="navbarCollapse" isOpen={this.state.isOpen} navbar>
+                    <MDBNavbarNav left>
+                        <MDBNavItem>
+                            <MDBNavLink to="/">Server Selection</MDBNavLink>
+                        </MDBNavItem>
+                    </MDBNavbarNav>
+                    <MDBNavbarNav right>
+                        <MDBNavItem>
+                            <MDBDropdown>
+                                <MDBDropdownToggle nav caret>
+                                    <MDBIcon icon='user' />
+                                </MDBDropdownToggle>
+                                <MDBDropdownMenu className="dropdown-default">
+                                    <MDBDropdownItem href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</MDBDropdownItem>
+                                </MDBDropdownMenu>
+                            </MDBDropdown>
+                        </MDBNavItem>
+                    </MDBNavbarNav>
+                </MDBCollapse>
+            </MDBNavbar>
+        );
+    }
+}
+
+NavigationBar.propTypes = {
+    user: PropTypes.object
+}
\ No newline at end of file