diff options
Diffstat (limited to 'frontend/src/components/navigation')
4 files changed, 81 insertions, 73 deletions
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js index 7a1c2462..c5de3d0b 100644 --- a/frontend/src/components/navigation/AppNavbarComponent.js +++ b/frontend/src/components/navigation/AppNavbarComponent.js @@ -1,22 +1,23 @@ import React from 'react' import FontAwesome from 'react-fontawesome' import { Link } from 'react-router-dom' +import { NavLink } from 'reactstrap' import Navbar, { NavItem } from './Navbar' import './Navbar.sass' const AppNavbarComponent = ({ project, fullWidth }) => ( <Navbar fullWidth={fullWidth}> <NavItem route="/projects"> - <Link className="nav-link" title="My Projects" to="/projects"> + <NavLink tag={Link} title="My Projects" to="/projects"> <FontAwesome name="list" className="mr-2" /> My Projects - </Link> + </NavLink> </NavItem> {project ? ( <NavItem> - <Link className="nav-link" title="Current Project" to={`/projects/${project._id}`}> + <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}> <span>{project.name}</span> - </Link> + </NavLink> </NavItem> ) : undefined} </Navbar> diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index e22933af..08d222ea 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -1,13 +1,12 @@ import React from 'react' +import { NavItem, NavLink } from 'reactstrap' import Navbar from './Navbar' import './Navbar.sass' const ScrollNavItem = ({ id, name }) => ( - <li className="nav-item"> - <a className="nav-link" href={id}> - {name} - </a> - </li> + <NavItem> + <NavLink href={id}>{name}</NavLink> + </NavItem> ) const HomeNavbar = () => ( diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js index e3de2ec7..78b02b44 100644 --- a/frontend/src/components/navigation/LogoutButton.js +++ b/frontend/src/components/navigation/LogoutButton.js @@ -2,11 +2,12 @@ import PropTypes from 'prop-types' import React from 'react' import FontAwesome from 'react-fontawesome' import { Link } from 'react-router-dom' +import { NavLink } from 'reactstrap' const LogoutButton = ({ onLogout }) => ( - <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}> + <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}> <FontAwesome name="power-off" size="lg" /> - </Link> + </NavLink> ) LogoutButton.propTypes = { diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index 164a2309..55f98900 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -1,6 +1,15 @@ -import classNames from 'classnames' -import React from 'react' -import { Link, withRouter } from 'react-router-dom' +import React, { useState } from 'react' +import { Link, useLocation } from 'react-router-dom' +import { + Navbar as RNavbar, + NavItem as RNavItem, + NavLink, + NavbarBrand, + NavbarToggler, + Collapse, + Nav, + Container, +} from 'reactstrap' import { userIsLoggedIn } from '../../auth/index' import Login from '../../containers/auth/Login' import Logout from '../../containers/auth/Logout' @@ -9,9 +18,6 @@ import './Navbar.sass' export const NAVBAR_HEIGHT = 60 -export const NavItem = withRouter((props) => <NavItemWithoutRoute {...props} />) -export const LoggedInSection = withRouter((props) => <LoggedInSectionWithoutRoute {...props} />) - const GitHubLink = () => ( <a href="https://github.com/atlarge-research/opendc" @@ -22,64 +28,65 @@ const GitHubLink = () => ( </a> ) -const NavItemWithoutRoute = ({ route, location, children }) => ( - <li className={classNames('nav-item clickable', location.pathname === route ? 'active' : undefined)}>{children}</li> -) +export const NavItem = ({ route, children }) => { + const location = useLocation() + return <RNavItem active={location.pathname === route}>{children}</RNavItem> +} -const LoggedInSectionWithoutRoute = ({ location }) => ( - <ul className="navbar-nav auth-links"> - {userIsLoggedIn() ? ( - [ - location.pathname === '/' ? ( - <NavItem route="/projects" key="projects"> - <Link className="nav-link" title="My Projects" to="/projects"> - My Projects - </Link> - </NavItem> - ) : ( - <NavItem route="/profile" key="profile"> - <Link className="nav-link" title="My Profile" to="/profile"> - <ProfileName /> - </Link> - </NavItem> - ), - <NavItem route="logout" key="logout"> - <Logout /> - </NavItem>, - ] - ) : ( - <NavItem route="login"> - <GitHubLink /> - <Login visible={true} /> - </NavItem> - )} - </ul> -) +export const LoggedInSection = () => { + const location = useLocation() + return ( + <Nav navbar className="auth-links"> + {userIsLoggedIn() ? ( + [ + location.pathname === '/' ? ( + <NavItem route="/projects" key="projects"> + <NavLink tag={Link} title="My Projects" to="/projects"> + My Projects + </NavLink> + </NavItem> + ) : ( + <NavItem route="/profile" key="profile"> + <NavLink tag={Link} title="My Profile" to="/profile"> + <ProfileName /> + </NavLink> + </NavItem> + ), + <NavItem route="logout" key="logout"> + <Logout /> + </NavItem>, + ] + ) : ( + <NavItem route="login"> + <GitHubLink /> + <Login visible={true} /> + </NavItem> + )} + </Nav> + ) +} -const Navbar = ({ fullWidth, children }) => ( - <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar"> - <div className={fullWidth ? 'container-fluid' : 'container'}> - <button - className="navbar-toggler navbar-toggler-right" - type="button" - data-toggle="collapse" - data-target="#navbarSupportedContent" - aria-controls="navbarSupportedContent" - aria-expanded="false" - aria-label="Toggle navigation" - > - <span className="navbar-toggler-icon" /> - </button> - <Link className="navbar-brand opendc-brand" to="/" title="OpenDC" onClick={() => window.scrollTo(0, 0)}> - <img src="/img/logo.png" alt="OpenDC" /> - </Link> +const Navbar = ({ fullWidth, children }) => { + const [isOpen, setIsOpen] = useState(false) + const toggle = () => setIsOpen(!isOpen) - <div className="collapse navbar-collapse" id="navbarSupportedContent"> - <ul className="navbar-nav mr-auto">{children}</ul> - <LoggedInSection /> - </div> - </div> - </nav> -) + return ( + <RNavbar fixed="top" color="light" light expand="lg" id="navbar"> + <Container fluid={fullWidth}> + <NavbarToggler onClick={toggle} /> + <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand"> + <img src="/img/logo.png" alt="OpenDC" /> + </NavbarBrand> + + <Collapse isOpen={isOpen} navbar> + <Nav className="mr-auto" navbar> + {children} + </Nav> + <LoggedInSection /> + </Collapse> + </Container> + </RNavbar> + ) +} export default Navbar |