blob: 6dfc20b0119ec3142d128fb6f0c8498072bbf4d6 (
plain)
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
|
import classNames from "classnames";
import React from 'react';
import {Link, withRouter} from "react-router-dom";
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.css";
export const NAVBAR_HEIGHT = 60;
export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
export const LoggedInSection = withRouter(props => <LoggedInSectionWithoutRoute {...props}/>);
const NavItemWithoutRoute = ({route, location, children}) => (
<li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
{children}
</li>
);
const LoggedInSectionWithoutRoute = ({location}) => (
<ul className="navbar-nav auth-links">
{userIsLoggedIn() ?
[
location.pathname === "/" ?
<NavItem route="/simulations" key="simulations">
<Link className="nav-link" title="My Simulations" to="/simulations">
My Simulations
</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">
<Login visible={true}/>
</NavItem>
}
</ul>
)
;
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">
<img src="/img/logo.png" alt="OpenDC"/>
</Link>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
{children}
</ul>
<LoggedInSection/>
</div>
</div>
</nav>
);
export default Navbar;
|
