Web/navbar responsive

web/src/components/navbar/index.js

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Headroom from 'headroom.js';
-import { Navbar as NavbarStrap, Container, NavbarBrand, NavItem, Nav, NavLink, UncontrolledTooltip } from 'reactstrap';
+import {
+  Navbar as NavbarStrap,
+  Container,
+  NavbarBrand,
+  NavItem,
+  Nav,
+  NavLink,
+  UncontrolledTooltip,
+  UncontrolledCollapse,
+  Row,
+  Col,
+  Button,
+} from 'reactstrap';
 
 import Logo from 'assets/img/logo.png';
+import PaleBackgroundLogo from 'assets/img/pale_background_logo.png';
 import text from './text.json';
 
 const OutsideLink = ({ href, iconClass, linkName, tooltipText, tooltipID }) => {
@@ -35,29 +48,77 @@ OutsideLink.defaultProps = {
   tooltipText: '',
 };
 
-class Navbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.navbarstrapRef = React.createRef();
-  }
+const ResponsiveCollapse = ({ children }) => {
+  const [collapseClass, setCollapseClass] = useState('');
+  const [isCollapseOpen, setIsCollapseOpen] = useState(false);
 
-  componentDidMount() {
-    const headroom = new Headroom(this.navbarstrapRef);
+  return (
+    <React.Fragment>
+      <button className="navbar-toggler" id="navbar_global" onClick={() => setIsCollapseOpen(!isCollapseOpen)}>
+        <span className="navbar-toggler-icon" />
+      </button>
+      <UncontrolledCollapse
+        toggler="#navbar_global"
+        navbar
+        isOpen={isCollapseOpen}
+        className={collapseClass}
+        onExiting={() => {
+          setCollapseClass('collapsing-out');
+        }}
+        onExited={() => {
+          setCollapseClass('');
+        }}
+      >
+        <div className="navbar-collapse-header">
+          <Row>
+            <Col className="collapse-brand" xs="6">
+              <Link to="/">
+                <img alt="Polydodo" src={PaleBackgroundLogo} />
+              </Link>
+            </Col>
+            <Col className="collapse-close" xs="6">
+              <Button
+                color="link"
+                className="navbar-toggler"
+                id="navbar_global"
+                onClick={() => setIsCollapseOpen(false)}
+              >
+                <span />
+                <span />
+              </Button>
+            </Col>
+          </Row>
+        </div>
+        {children}
+      </UncontrolledCollapse>
+    </React.Fragment>
+  );
+};
+
+ResponsiveCollapse.propTypes = {
+  children: PropTypes.array.isRequired,
+};
+
+const Navbar = () => {
+  const navbarstrapRef = useRef();
+  useEffect(() => {
+    const headroom = new Headroom(navbarstrapRef.current);
     headroom.init();
-  }
+    return () => headroom.destroy();
+  });
 
-  render() {
-    return (
-      <div ref={(ref) => (this.navbarstrapRef = ref)} className="navbar-main navbar-transparent navbar-light headroom">
-        <NavbarStrap id="navbar-main" expand="lg">
-          <Container>
-            <NavbarBrand className="mr-lg-5" to="/" tag={Link}>
-              <img alt="Polydodo" src={Logo} />
-            </NavbarBrand>
+  return (
+    <div ref={(ref) => (navbarstrapRef.current = ref)} className="navbar-main navbar-transparent navbar-light headroom">
+      <NavbarStrap id="navbar-main" expand="lg">
+        <Container>
+          <NavbarBrand className="mr-lg-5" to="/" tag={Link}>
+            <img alt="Polydodo" src={Logo} />
+          </NavbarBrand>
 
+          <ResponsiveCollapse>
             <Nav className="navbar-nav-hover align-items-lg-center" navbar>
               <NavItem>
-                <NavLink to="/" tag={Link}>
+                <NavLink to="/" tag={Link} id="navbar_global">
                   {text['navbar_home']}
                 </NavLink>
               </NavItem>
@@ -101,11 +162,11 @@ class Navbar extends React.Component {
                 tooltipID="tooltip112445449"
               />
             </Nav>
-          </Container>
-        </NavbarStrap>
-      </div>
-    );
-  }
-}
+          </ResponsiveCollapse>
+        </Container>
+      </NavbarStrap>
+    </div>
+  );
+};
 
 export default Navbar;

web/src/views/analyze_sleep/upload_form/index.js

@@ -159,8 +159,8 @@ const UploadForm = () => {
                   <Input
                     innerRef={register({
                       required: 'A number must be provided',
-                      min: { value: MIN_AGE, message: 'Please provide a positive integer' },
-                      max: { value: MAX_AGE, message: 'Age cannot be more than 125 y/o' },
+                      min: { value: MIN_AGE, message: `Age must be at least ${MIN_AGE} y/o` },
+                      max: { value: MAX_AGE, message: `Age cannot be more than ${MAX_AGE} y/o` },
                     })}
                     min={MIN_AGE}
                     max={MAX_AGE}

web/src/views/sleep_analysis_results/index.js

@@ -135,9 +135,11 @@ const SleepAnalysisResults = () => {
         </p>
         <p>Wanna know how accurate this data is?</p>
         <Row className="scrollytelling-container__buttons">
-          <Button className="mt-4" color="default" to="/performance" tag={Link}>
-            Check out the performances
-          </Button>
+          <Link to="/performance">
+            <Button className="mt-4" color="default">
+              Check out the performances
+            </Button>
+          </Link>
           <Button
             className="mt-4"
             color="secondary"