summaryrefslogtreecommitdiff
path: root/frontend/src/components/navigation
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/navigation')
-rw-r--r--frontend/src/components/navigation/AppNavbar.js106
-rw-r--r--frontend/src/components/navigation/HomeNavbar.js38
-rw-r--r--frontend/src/components/navigation/LogoutButton.js22
-rw-r--r--frontend/src/components/navigation/Navbar.js176
-rw-r--r--frontend/src/components/navigation/Navbar.sass36
5 files changed, 189 insertions, 189 deletions
diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js
index 1a35f85d..451bb6a3 100644
--- a/frontend/src/components/navigation/AppNavbar.js
+++ b/frontend/src/components/navigation/AppNavbar.js
@@ -1,56 +1,56 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
-import Navbar, { NavItem } from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
+import Navbar, { NavItem } from './Navbar'
+import './Navbar.css'
const AppNavbar = ({ simulationId, inSimulation, fullWidth }) => (
- <Navbar fullWidth={fullWidth}>
- {inSimulation ? (
- <NavItem route={"/simulations/" + simulationId}>
- <Link
- className="nav-link"
- title="Construction"
- to={"/simulations/" + simulationId}
- >
- <FontAwesome name="industry" className="mr-2" />
- Construction
- </Link>
- </NavItem>
- ) : (
- undefined
- )}
- {inSimulation ? (
- <NavItem route={"/simulations/" + simulationId + "/experiments"}>
- <Link
- className="nav-link"
- title="Experiments"
- to={"/simulations/" + simulationId + "/experiments"}
- >
- <FontAwesome name="play" className="mr-2" />
- Experiments
- </Link>
- </NavItem>
- ) : (
- undefined
- )}
- <NavItem route="/simulations">
- <Link className="nav-link" title="My Simulations" to="/simulations">
- <FontAwesome name="list" className="mr-2" />
- My Simulations
- </Link>
- </NavItem>
- <NavItem route="email">
- <a
- className="nav-link"
- title="Support"
- href="mailto:opendc@atlarge-research.com"
- >
- <FontAwesome name="envelope" className="mr-2" />
- Support
- </a>
- </NavItem>
- </Navbar>
-);
+ <Navbar fullWidth={fullWidth}>
+ {inSimulation ? (
+ <NavItem route={'/simulations/' + simulationId}>
+ <Link
+ className="nav-link"
+ title="Construction"
+ to={'/simulations/' + simulationId}
+ >
+ <FontAwesome name="industry" className="mr-2"/>
+ Construction
+ </Link>
+ </NavItem>
+ ) : (
+ undefined
+ )}
+ {inSimulation ? (
+ <NavItem route={'/simulations/' + simulationId + '/experiments'}>
+ <Link
+ className="nav-link"
+ title="Experiments"
+ to={'/simulations/' + simulationId + '/experiments'}
+ >
+ <FontAwesome name="play" className="mr-2"/>
+ Experiments
+ </Link>
+ </NavItem>
+ ) : (
+ undefined
+ )}
+ <NavItem route="/simulations">
+ <Link className="nav-link" title="My Simulations" to="/simulations">
+ <FontAwesome name="list" className="mr-2"/>
+ My Simulations
+ </Link>
+ </NavItem>
+ <NavItem route="email">
+ <a
+ className="nav-link"
+ title="Support"
+ href="mailto:opendc@atlarge-research.com"
+ >
+ <FontAwesome name="envelope" className="mr-2"/>
+ Support
+ </a>
+ </NavItem>
+ </Navbar>
+)
-export default AppNavbar;
+export default AppNavbar
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 5d08bf3c..5bb6721d 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,24 +1,24 @@
-import React from "react";
-import Navbar from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import Navbar from './Navbar'
+import './Navbar.css'
const ScrollNavItem = ({ id, name }) => (
- <li className="nav-item">
- <a className="nav-link" href={id}>
- {name}
- </a>
- </li>
-);
+ <li className="nav-item">
+ <a className="nav-link" href={id}>
+ {name}
+ </a>
+ </li>
+)
const HomeNavbar = () => (
- <Navbar fullWidth={false}>
- <ScrollNavItem id="#stakeholders" name="Stakeholders" />
- <ScrollNavItem id="#modeling" name="Modeling" />
- <ScrollNavItem id="#simulation" name="Simulation" />
- <ScrollNavItem id="#technologies" name="Technologies" />
- <ScrollNavItem id="#team" name="Team" />
- <ScrollNavItem id="#contact" name="Contact" />
- </Navbar>
-);
+ <Navbar fullWidth={false}>
+ <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
+ <ScrollNavItem id="#modeling" name="Modeling"/>
+ <ScrollNavItem id="#simulation" name="Simulation"/>
+ <ScrollNavItem id="#technologies" name="Technologies"/>
+ <ScrollNavItem id="#team" name="Team"/>
+ <ScrollNavItem id="#contact" name="Contact"/>
+ </Navbar>
+)
-export default HomeNavbar;
+export default HomeNavbar
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index 800a3da8..905e1ae9 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -1,16 +1,16 @@
-import PropTypes from "prop-types";
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
+import PropTypes from 'prop-types'
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
const LogoutButton = ({ onLogout }) => (
- <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
- <FontAwesome name="power-off" size="lg" />
- </Link>
-);
+ <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+ <FontAwesome name="power-off" size="lg"/>
+ </Link>
+)
LogoutButton.propTypes = {
- onLogout: PropTypes.func.isRequired
-};
+ onLogout: PropTypes.func.isRequired,
+}
-export default LogoutButton;
+export default LogoutButton
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 44458949..d22f637e 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -1,102 +1,102 @@
-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";
+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 NAVBAR_HEIGHT = 60
-export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />);
+export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />)
export const LoggedInSection = withRouter(props => (
- <LoggedInSectionWithoutRoute {...props} />
-));
+ <LoggedInSectionWithoutRoute {...props} />
+))
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>
-);
+ <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>
+)
const NavItemWithoutRoute = ({ route, location, children }) => (
- <li
- className={classNames(
- "nav-item",
- location.pathname === route ? "active" : undefined
- )}
- >
- {children}
- </li>
-);
+ <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>
+ <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="/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>
-);
+ <NavItem route="login">
+ <GitHubLink/>
+ <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"
- onClick={() => window.scrollTo(0, 0)}
- >
- <img src="/img/logo.png" alt="OpenDC" />
- </Link>
+ <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>
- <div className="collapse navbar-collapse" id="navbarSupportedContent">
- <ul className="navbar-nav mr-auto">{children}</ul>
- <LoggedInSection />
- </div>
- </div>
- </nav>
-);
+ <div className="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul className="navbar-nav mr-auto">{children}</ul>
+ <LoggedInSection/>
+ </div>
+ </div>
+ </nav>
+)
-export default Navbar;
+export default Navbar
diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass
index 94c52936..a270bc6b 100644
--- a/frontend/src/components/navigation/Navbar.sass
+++ b/frontend/src/components/navigation/Navbar.sass
@@ -2,28 +2,28 @@
@import ../../style-globals/_variables.sass
.navbar
- border-top: $blue 3px solid
- border-bottom: $gray-semi-dark 1px solid
- color: $gray-very-dark
- background: #fafafb
+ 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
+ display: inline-block
+ color: $gray-very-dark
- +transition(background, $transition-length)
+ +transition(background, $transition-length)
- img
- position: relative
- bottom: 3px
- display: inline-block
- width: 30px
+ img
+ position: relative
+ bottom: 3px
+ display: inline-block
+ width: 30px
.login
- height: 40px
- background: $blue
- border: none
- +clickable
+ height: 40px
+ background: $blue
+ border: none
+ +clickable
- &:hover
- background: $blue-dark
+ &:hover
+ background: $blue-dark