1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
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
|
