diff options
Diffstat (limited to 'client/src/components/navigation/NavigationBar.js')
| -rw-r--r-- | client/src/components/navigation/NavigationBar.js | 72 |
1 files changed, 43 insertions, 29 deletions
diff --git a/client/src/components/navigation/NavigationBar.js b/client/src/components/navigation/NavigationBar.js index 3962aae..0b90958 100644 --- a/client/src/components/navigation/NavigationBar.js +++ b/client/src/components/navigation/NavigationBar.js @@ -1,8 +1,5 @@ import React, { Component } from 'react'; -import { - MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBIcon, - MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBCol -} from 'mdbreact' +import { Navbar, NavDropdown, Nav } from 'react-bootstrap'; import PropTypes from 'prop-types'; export default class NavigationBar extends Component { @@ -16,31 +13,48 @@ export default class NavigationBar extends Component { 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> + <Navbar bg="dark" className="dark-navbar" expand="lg"> + <Navbar.Brand>Aki Dashboard</Navbar.Brand> + <Navbar.Toggle aria-controls="basic-navbar-nav" /> + <Navbar.Collapse id="basic-navbar-nav"> + <Nav className="mr-auto"> + <Nav.Link href="/">Home</Nav.Link> + <Nav.Link href="/">Server Selection</Nav.Link> + </Nav> + <NavDropdown title={<img + src={`https://cdn.discordapp.com/avatars/${this.props.user.id}/${this.props.user.avatar}.png?size=32`} + alt="Discord profile picture" className="user-icon-image" />} + id="basic=nav-dropdown"> + <NavDropdown.Item href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</NavDropdown.Item> + </NavDropdown> + </Navbar.Collapse> + </Navbar> + + // <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> ); } } |