summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/navigation/Navbar.js')
-rw-r--r--opendc-web/opendc-web-ui/src/components/navigation/Navbar.js120
1 files changed, 0 insertions, 120 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
deleted file mode 100644
index dc74bb8f..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-import {
- Navbar as RNavbar,
- NavItem as RNavItem,
- NavLink,
- NavbarBrand,
- NavbarToggler,
- Collapse,
- Nav,
- Container,
-} from 'reactstrap'
-import Login from '../../containers/auth/Login'
-import Logout from '../../containers/auth/Logout'
-import ProfileName from '../../containers/auth/ProfileName'
-import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useAuth } from '../../auth'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-
-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 }}
- >
- <FontAwesomeIcon icon={faGithub} size="2x" />
- </a>
-)
-
-export const NavItem = ({ route, children }) => {
- const router = useRouter()
- const handleClick = (e) => {
- e.preventDefault()
- router.push(route)
- }
- return (
- <RNavItem onClick={handleClick} active={router.asPath === route}>
- {children}
- </RNavItem>
- )
-}
-
-NavItem.propTypes = {
- route: PropTypes.string.isRequired,
- children: PropTypes.node,
-}
-
-export const LoggedInSection = () => {
- const router = useRouter()
- const { isAuthenticated } = useAuth()
- return (
- <Nav navbar className="auth-links">
- {isAuthenticated ? (
- [
- router.asPath === '/' ? (
- <NavItem route="/projects" key="projects">
- <Link href="/projects" passHref>
- <NavLink title="My Projects" to="/projects">
- My Projects
- </NavLink>
- </Link>
- </NavItem>
- ) : (
- <RNavItem key="profile">
- <NavLink title="My Profile">
- <ProfileName />
- </NavLink>
- </RNavItem>
- ),
- <NavItem route="logout" key="logout">
- <Logout />
- </NavItem>,
- ]
- ) : (
- <RNavItem>
- <GitHubLink />
- <Login visible={true} className={login} />
- </RNavItem>
- )}
- </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" className={navbar}>
- <Container fluid={fullWidth}>
- <NavbarToggler onClick={toggle} />
- <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
- <div className="mb-n1">
- <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
- </div>
- </NavbarBrand>
-
- <Collapse isOpen={isOpen} navbar>
- <Nav className="mr-auto" navbar>
- {children}
- </Nav>
- <LoggedInSection />
- </Collapse>
- </Container>
- </RNavbar>
- )
-}
-
-Navbar.propTypes = {
- fullWidth: PropTypes.bool,
- children: PropTypes.node,
-}
-
-export default Navbar