diff --git a/compendium-frontend/src/components/global/ExternalPageNavBar.tsx b/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
index 701d7f10813f0aa289c6eaf9a9f295c32a64c73f..bb2ac21e3fd13657665c3016ff103f321c8f649a 100644
--- a/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
+++ b/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
@@ -1,5 +1,6 @@
import React, { ReactElement } from "react";
-import { Container, Row } from "react-bootstrap";
+import { Col, Container, Row } from "react-bootstrap";
+import Login from "../../shared/Login";
import GeantLogo from "../../images/geant_logo_f2020_new.svg";
/**
@@ -14,26 +15,36 @@ function ExternalPageNavBar(): ReactElement {
<Container>
<Row>
- <nav>
- <a href="https://geant.org/"><img src={GeantLogo} /></a>
+ <Col xs={10}>
+ <div className="nav-wrapper">
+ <nav className="header-nav">
+ <a href="https://geant.org/"><img src={GeantLogo} /></a>
- <ul>
- <li><a href="https://network.geant.org/">NETWORK</a></li>
- <li><a href="https://geant.org/services/">SERVICES</a></li>
- <li><a href="https://community.geant.org/">COMMUNITY</a></li>
- <li><a href="https://tnc23.geant.org/">TNC</a></li>
- <li><a href="https://geant.org/projects/">PROJECTS</a></li>
- <li><a href="https://connect.geant.org/">CONNECT</a></li>
- <li><a href="https://impact.geant.org/">IMPACT</a></li>
- <li><a href="https://careers.geant.org/">CAREERS</a></li>
- <li><a href="https://about.geant.org/">ABOUT</a></li>
- <li><a href="https://connect.geant.org/community-news">NEWS</a></li>
- <li><a href="https://resources.geant.org/">RESOURCES</a></li>
- </ul>
- </nav>
+ <ul>
+ <li><a className="nav-link-entry" href="https://network.geant.org/">NETWORK</a></li>
+ <li><a className="nav-link-entry" href="https://geant.org/services/">SERVICES</a></li>
+ <li><a className="nav-link-entry" href="https://community.geant.org/">COMMUNITY</a></li>
+ <li><a className="nav-link-entry" href="https://tnc23.geant.org/">TNC</a></li>
+ <li><a className="nav-link-entry" href="https://geant.org/projects/">PROJECTS</a></li>
+ <li><a className="nav-link-entry" href="https://connect.geant.org/">CONNECT</a></li>
+ <li><a className="nav-link-entry" href="https://impact.geant.org/">IMPACT</a></li>
+ <li><a className="nav-link-entry" href="https://careers.geant.org/">CAREERS</a></li>
+ <li><a className="nav-link-entry" href="https://about.geant.org/">ABOUT</a></li>
+ <li><a className="nav-link-entry" href="https://connect.geant.org/community-news">NEWS</a></li>
+ <li><a className="nav-link-entry" href="https://resources.geant.org/">RESOURCES</a></li>
+ </ul>
+
+ </nav>
+ </div>
+
+ </Col>
+
+ <Col align="right">
+ <Login />
+ </Col>
</Row>
</Container>
- </div>
+ </div >
);
}
diff --git a/compendium-frontend/src/main.scss b/compendium-frontend/src/main.scss
index 7df1e65b66bbd1cb494a9a59e1612a6e5916f477..dff9a81ce01d7523498dd0c2d67f4e2ba283feeb 100644
--- a/compendium-frontend/src/main.scss
+++ b/compendium-frontend/src/main.scss
@@ -2,13 +2,49 @@
@import 'scss/base/text';
@import 'scss/layout/components';
-.external-page-nav-bar {
- background-color: #003753;
+.nav-link-entry {
+ border-radius: 2px;
+ font-family: "Open Sans", sans-serif;
+ font-size: 0.9rem;
+ font-weight: 600;
+ text-decoration: none;
color: #b0cde1;
+ padding: 10px;
+}
+
+.nav-link {
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
height: 60px;
+
+ .nav-link-entry:hover {
+ color: #003753;
+ background-color: #b0cde1;
+ }
+
+ ul {
+ line-height: 1.3;
+ text-transform: uppercase;
+ list-style: none;
+
+ li {
+ float: left;
+
+
+ }
+ }
+}
+
+.nav-wrapper {
display: flex;
-webkit-box-align: center;
align-items: center;
+ height: 60px;
+}
+
+.header-nav {
+ width: 100%;
img {
float: left;
@@ -42,8 +78,14 @@
}
}
+.external-page-nav-bar {
+ background-color: #003753;
+ color: #b0cde1;
+ height: 60px;
+}
+
.app {
- display: flex;
+ // display: flex;
flex-direction: column;
min-height: 100vh;
-}
+}
\ No newline at end of file
diff --git a/compendium-frontend/src/scss/layout/Login.scss b/compendium-frontend/src/scss/layout/Login.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0d2dcb0c77a94003bb79d97aa8dd155276a6b238
--- /dev/null
+++ b/compendium-frontend/src/scss/layout/Login.scss
@@ -0,0 +1,24 @@
+.btn-login {
+ --bs-btn-color: #fff;
+ --bs-btn-border-color: #6c757d;
+ --bs-btn-border-radius: none;
+
+ // active
+ --bs-btn-active-color: #fff;
+ // see https://stackoverflow.com/a/76213205 for why this syntax is necessary
+ --bs-btn-active-bg: #{$yellow-orange};
+ --bs-btn-active-border-color: #{$yellow-orange};
+
+ // hover
+ --bs-btn-hover-color: rgb(0, 63, 95);
+ --bs-btn-hover-bg: #{$yellow-orange};
+ --bs-btn-hover-border-color: #{$yellow-orange};
+
+
+ // disabled
+ --bs-btn-disabled-color: #6c757d;
+ --bs-btn-disabled-bg: transparent;
+ // --bs-btn-disabled-border-color: #6c757d;
+
+ border: 2px solid $yellow-orange;
+}
\ No newline at end of file
diff --git a/compendium-frontend/src/shared/Login.tsx b/compendium-frontend/src/shared/Login.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..baa752002a442e9d3aad8159e67e6ebec3449a57
--- /dev/null
+++ b/compendium-frontend/src/shared/Login.tsx
@@ -0,0 +1,23 @@
+import React, { useContext, useEffect } from 'react';
+import { Button } from 'react-bootstrap';
+import { userContext } from './UserProvider';
+
+
+const Login = () => {
+ const { user, logout } = useContext(userContext);
+
+ if (!user.name) {
+ return (
+ <a href='/login'><Button variant='login' active={false} style={{ maxWidth: '6rem' }}><span>Login</span></Button></a>
+ )
+ }
+
+ if (user.permissions.active) {
+ return <div className='nav-link' style={{ float: 'right' }}><a className='nav-link-entry' href="/survey">Go to Survey</a></div>
+ }
+ return <div className='nav-link' style={{ float: 'right' }}>
+ <span>{'<'}{user.name}{'>'}</span>
+ </div>
+}
+
+export default Login
\ No newline at end of file