Update navbar to be similar to the geant.org one

Use media queries for wrapping text differently on smaller screens

webapp/src/Navigation.tsx

-import React, {ReactElement} from 'react';
-import {Link} from 'react-router-dom'
-
-// const api_url = window.location.origin+'/';
-
-// console.log(api_url)
-
-function Navigation(): ReactElement {
-
-  const navStyle ={ 
-    color: 'white'
-  }
-
-  return (
-    <nav className='header-naviagtion'>
-        <ul className='nav-links'>
-          <li>
-            <Link  style={navStyle} to="/about">
-              About
-            </Link>
-          </li>
-          <li>
-            <Link  style={navStyle} to="/report">
-              Annual Report
-            </Link>
-          </li>
-          <li>
-            <Link  style={navStyle} to="/analysis">
-              Data Analysis
-            </Link>
-          </li>
-        </ul>
-    </nav>
-  );
-}
-
-export default Navigation;

webapp/src/components/global/ExternalPageFooter.tsx

-import React, {ReactElement} from "react";
-
-function ExternalPageFooter(): ReactElement {
-    return (<div>
-
-    </div>);
-}
-
-export default ExternalPageFooter
\ No newline at end of file

webapp/src/components/global/ExternalPageNavBar.tsx

-import React, {ReactElement} from "react";
-import {Container, Row, Col} from "react-bootstrap";
+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
 import GeantLogo from "../../images/geant_logo_f2020_new.svg";
 
 /**
@@ -14,22 +14,23 @@ function ExternalPageNavBar(): ReactElement {
 
             <Container>
                 <Row>
-                    <Col>
-                        <img src={GeantLogo}/>
+                    <nav>
+                        <a href="/"><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>
+                            <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>
-                    </Col>
+                    </nav>
                 </Row>
             </Container>
         </div>

webapp/src/scss/layout/_components.scss

@@ -7,7 +7,9 @@
 
 .geant-container {
   max-width: 100vw;
-  height: 100vh;
+  min-height: 95%;
+  height: auto;
+
   padding: 2% 0;
 }
 
@@ -17,10 +19,23 @@
 }
 
 .wordwrap {
-  max-width: 30vw;
+  max-width: 40vw;
   word-wrap: break-word;
 }
 
+
+@media screen and (max-aspect-ratio: 1/1) {
+  .wordwrap {
+    max-width: max(66vw, 66%);
+  }
+}
+
+@media screen and (max-width: 1920px) {
+  .wordwrap {
+    max-width: 50%;
+  }
+}
+
 .center {
   display: flex;
   align-items: center;
@@ -68,4 +83,34 @@
 .collapsible-column {
   flex-basis: 100%;
   padding: 1rem;
+}
+
+@mixin linkHover {
+  &:hover{
+    color: #003753
+  }
+}
+
+.link-text{
+  text-decoration: none;
+  color: #003753;
+  @include linkHover;
+}
+
+.link-text-underline {
+  @extend .link-text;
+}
+
+.link-text-underline:hover {
+  text-decoration: underline;
+}
+
+.page-footer {
+  min-height: 350px;
+  width: 100%;
+  bottom:0;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+  background-color: #3b536b;
 }
\ No newline at end of file