diff options
| author | Georgios Andreadis <info@gandreadis.com> | 2020-07-01 13:33:31 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2020-08-24 19:47:17 +0200 |
| commit | de8f12d74faef5fa3f9e38d1340948cab2d06ea3 (patch) | |
| tree | 678bf1af3e5fa2334f0df43388d45294785bbf1e /frontend/src/components/navigation | |
| parent | 44236756c4cf689806dc17c6950a2cff3e9227bf (diff) | |
Manually generate IDs
Diffstat (limited to 'frontend/src/components/navigation')
| -rw-r--r-- | frontend/src/components/navigation/AppNavbar.js | 106 | ||||
| -rw-r--r-- | frontend/src/components/navigation/HomeNavbar.js | 38 | ||||
| -rw-r--r-- | frontend/src/components/navigation/LogoutButton.js | 22 | ||||
| -rw-r--r-- | frontend/src/components/navigation/Navbar.js | 176 | ||||
| -rw-r--r-- | frontend/src/components/navigation/Navbar.sass | 36 |
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 |
