diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/navigation')
5 files changed, 188 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js new file mode 100644 index 00000000..c5de3d0b --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js @@ -0,0 +1,26 @@ +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"> + <NavLink tag={Link} title="My Projects" to="/projects"> + <FontAwesome name="list" className="mr-2" /> + My Projects + </NavLink> + </NavItem> + {project ? ( + <NavItem> + <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}> + <span>{project.name}</span> + </NavLink> + </NavItem> + ) : undefined} + </Navbar> +) + +export default AppNavbarComponent diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js new file mode 100644 index 00000000..08d222ea --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js @@ -0,0 +1,23 @@ +import React from 'react' +import { NavItem, NavLink } from 'reactstrap' +import Navbar from './Navbar' +import './Navbar.sass' + +const ScrollNavItem = ({ id, name }) => ( + <NavItem> + <NavLink href={id}>{name}</NavLink> + </NavItem> +) + +const HomeNavbar = () => ( + <Navbar fullWidth={false}> + <ScrollNavItem id="#stakeholders" name="Stakeholders" /> + <ScrollNavItem id="#modeling" name="Modeling" /> + <ScrollNavItem id="#project" name="Project" /> + <ScrollNavItem id="#technologies" name="Technologies" /> + <ScrollNavItem id="#team" name="Team" /> + <ScrollNavItem id="#contact" name="Contact" /> + </Navbar> +) + +export default HomeNavbar diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js new file mode 100644 index 00000000..78b02b44 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js @@ -0,0 +1,17 @@ +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 }) => ( + <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}> + <FontAwesome name="power-off" size="lg" /> + </NavLink> +) + +LogoutButton.propTypes = { + onLogout: PropTypes.func.isRequired, +} + +export default LogoutButton diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js new file mode 100644 index 00000000..55f98900 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js @@ -0,0 +1,92 @@ +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' +import ProfileName from '../../containers/auth/ProfileName' +import './Navbar.sass' + +export const NAVBAR_HEIGHT = 60 + +const GitHubLink = () => ( + <a + href="https://github.com/atlarge-research/opendc" + className="ml-2 mr-3 text-dark" + style={{ position: 'relative', top: 7 }} + > + <span className="fa fa-github fa-2x" /> + </a> +) + +export const NavItem = ({ route, children }) => { + const location = useLocation() + return <RNavItem active={location.pathname === route}>{children}</RNavItem> +} + +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 }) => { + const [isOpen, setIsOpen] = useState(false) + const toggle = () => setIsOpen(!isOpen) + + 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 diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass new file mode 100644 index 00000000..c9d2aad2 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass @@ -0,0 +1,30 @@ +@import ../../style-globals/_mixins.sass +@import ../../style-globals/_variables.sass + +.navbar + border-top: $blue 3px solid + border-bottom: $gray-semi-dark 1px solid + color: $gray-very-dark + background: #fafafb + +.opendc-brand + display: inline-block + color: $gray-very-dark + + +transition(background, $transition-length) + + img + position: relative + bottom: 3px + display: inline-block + width: 30px + +.login + height: 40px + background: $blue + border: none + padding-top: 10px + +clickable + + &:hover + background: $blue-dark |