Merge pull request #41 from nwhacks/web/navbar-hide

Hide navbar based on scroll

web/.eslintrc.json

@@ -11,6 +11,7 @@
     "jest"
   ],
   "rules": {
+    "no-return-assign": 0,
     "no-param-reassign": 0,
     "import/prefer-default-export": 0,
     "prefer-template": 0,

web/components/Main.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Main = () => (<div>HOME PAGE</div>);
+const Main = () => (<div className="pad-nav">HOME PAGE</div>);
 
 export default Main;

web/components/auth/Login/Login.js

@@ -59,7 +59,7 @@ class Login extends React.Component {
             className="input-group">
             <h2 className="pad-sides-xxl">Sign in</h2>
             <div className="card split flex">
-              <div className="pad-ends-xxl pad-sides-xxl margin-text-inputs">
+              <div className="pad-ends-xxl pad-sides-xxl margin-vertical-text-inputs">
                 <TextInput
                   placeholder="Enter your email"
                   value={email}

web/components/dashboard/index.js

@@ -12,7 +12,7 @@ const DashBoard = (props) => {
     content = 'you didn\'t apply as hacker';
   }
 
-  return (<div className="below-nav">{content}</div>);
+  return (<div className="pad-nav">{content}</div>);
 };
 
 const mapStateToProps = (state) => {

web/components/demo/Demo.sass

@@ -1,3 +1,4 @@
 div#demo
   width: 50%
   margin-left: 25%
+  height: 90000000px

web/components/demo/index.js

@@ -35,7 +35,7 @@ class FrontEndComponents extends React.Component {
 
     const { active } = this.state;
     return (
-      <div id="demo">
+      <div id="demo" className="pad-nav">
         <p>Buttons</p>
         <br />
         <div>

web/components/navbar/Navbar.sass

@@ -1,43 +1,21 @@
 nav
-  display: flex
+  z-index: 500
   background: $white
-  box-shadow: 0px 4px 6px $shadow
   height: 64px
   position: fixed
-  width: 100%
+  transition: background $transition-time-long, shadow $transition-time-long, opacity $transition-time
 
-  > div
-    display: inline-flex
-  > div:last-of-type
-    width: 80%
-    justify-content: flex-end
-  > div:first-of-type
-    width: 20%
-    justify-content: flex-start
-  > div > div
-    display: flex
-    margin-top: 12px
-    margin-bottom: 12px
-    align-items: center
-    margin-right: 7.5%
-  > div > div:first-of-type
-    margin-left: 24px
-  > div > div:last-of-type
-    margin-right: 24px
   a
-    display: flex
-    align-items: center
     text-decoration: none
     font-family: Apercu Pro
     font-size: 18px
-    color: $primary
-  a:visited
-    color: $primary
 
-  a:hover
-    color: #00D5D5
   img
+    margin-top: 4px
     width: 32px
 
-.below-nav
-  padding-top: 64px
+  &.transparent
+    background: transparent
+
+  &.hide
+    opacity: 0

web/components/navbar/index.js

@@ -1,14 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { DISPLAY_TYPE } from '../../containers/navbar/DisplayTypes';
 import { BUTTON_TYPE } from '../../containers/navbar/ButtonTypes';
 import { SecondaryButton } from '../input/buttons';
 
-import logo from '../../assets/logo.png';
-
-const getLogo = () => (
-  <Link to="/"><img alt="" src={logo} /></Link>
-);
+import logo from '../../assets/logo.svg';
 
 const getButton = (buttonType) => {
   switch (buttonType) {
@@ -23,43 +20,96 @@ const getButton = (buttonType) => {
   }
 };
 
-const Navbar = ({ displayType, buttonType }) => {
-  switch (displayType) {
-    case DISPLAY_TYPE.ONLY_LOGO:
-      return (
-        <nav>
-          <div>
-            <div>{getLogo()}</div>
-          </div>
-        </nav>
-      );
-    case DISPLAY_TYPE.LOGO_AND_BUTTON:
-      return (
-        <nav>
-          <div>
-            <div>{getLogo()}</div>
-          </div>
-          <div>
-            <div>{getButton(buttonType)}</div>
-          </div>
-        </nav>
-      );
-    default:
-      return (
-        <nav>
-          <div>
-            <div>{getLogo()}</div>
+const NAVBAR_HEIGHT = 96;
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hidden: false,
+      transparent: true,
+      lastY: 0,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = () => {
+    // Calculate scroll direction
+    const { lastY } = this.state;
+    const scrollingDown = (window.scrollY - lastY) >= 0;
+
+    // Calculate position
+    const offset = window.pageYOffset || document.documentElement.scrollTop;
+    const atTop = offset < NAVBAR_HEIGHT;
+
+    // Calculate transparency - turn navbar transparent if some distance under
+    // the navbar
+    const transparent = offset < (NAVBAR_HEIGHT * 3);
+
+    // Update state
+    this.setState({
+      transparent,
+      hidden: (!atTop && scrollingDown),
+      lastY: window.scrollY,
+    });
+  }
+
+  render() {
+    const { hidden, transparent } = this.state;
+    const { displayType, buttonType } = this.props;
+    const button = getButton(buttonType);
+    const navbarRightElements = [
+      <Link to="/"><b>About</b></Link>,
+      <Link to="/"><b>Stories</b></Link>,
+      <Link to="/"><b>FAQ</b></Link>,
+      <Link to="/"><b>Sponsors</b></Link>,
+      <Link to="/"><b>2018</b></Link>,
+      button,
+    ];
+
+    let navbarRight;
+    let key = 0;
+    switch (displayType) {
+      case DISPLAY_TYPE.ONLY_LOGO:
+        break;
+      case DISPLAY_TYPE.LOGO_AND_BUTTON:
+        navbarRight = <div className="flex ai-center">{button}</div>;
+        break;
+      default:
+        navbarRight = navbarRightElements.map(l => (
+          <div
+            key={key += 1}
+            className="flex ai-center margin-sides-l">
+            {l}
           </div>
-          <div>
-            <div><Link to="/">About</Link></div>
-            <div><Link to="/">FAQ</Link></div>
-            <div><Link to="/">Sponsors</Link></div>
-            <div><Link to="/">2018</Link></div>
-            <div>{getButton(buttonType)}</div>
+        ));
+    }
+
+    return (
+      <nav className={`fill-width flex ${hidden ? 'hide' : ''} ${transparent ? 'transparent' : 'shadow'}`}>
+        <div className="flex ai-center jc-start margin-sides-l">
+          <div className="flex ai-center">
+            <Link to="/"><img alt="nwHacks" src={logo} /></Link>
           </div>
-        </nav>
-      );
+        </div>
+        <div className="flex jc-end margin-horizontal-divs fill-width">
+          {navbarRight}
+        </div>
+      </nav>
+    );
   }
+}
+
+Navbar.propTypes = {
+  displayType: PropTypes.symbol,
+  buttonType: PropTypes.symbol,
 };
 
 export default Navbar;

web/components/navbar/navbar.component.test.js

@@ -27,8 +27,8 @@ describe('Navbar component', () => {
         wrapper = getWrapper();
       });
 
-      test('there are six Links', () => {
-        expect(wrapper.find(Link)).toHaveProperty('length', 6);
+      test('there are seven Links', () => {
+        expect(wrapper.find(Link)).toHaveProperty('length', 7);
       });
 
       test('the first link is to home page', () => {
@@ -50,8 +50,8 @@ describe('Navbar component', () => {
         wrapper = getWrapper();
       });
 
-      test('there are six Links', () => {
-        expect(wrapper.find(Link)).toHaveProperty('length', 6);
+      test('there are seven Links', () => {
+        expect(wrapper.find(Link)).toHaveProperty('length', 7);
       });
 
       test('the first link is to home page', () => {

web/containers/navbar/index.js

@@ -16,6 +16,9 @@ const getDisplayType = (location) => {
 
   let displayType = DISPLAY_TYPE.ONLY_LOGO;
 
+  // For demo only - todo: remove
+  if (pathname === '/ui_demo') return DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS;
+
   if (isHomePage) {
     displayType = DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS;
   } else if (isDashBoardPage) {

web/styles/animations.sass

@@ -1,4 +1,13 @@
+/////////////////////////
+//    TRANSITIONS      //
+/////////////////////////
+  
 $transition-time: .2s
+$transition-time-long: 1.5s
+
+/////////////////////////
+//       MIXINS        //
+/////////////////////////
 
 // This is a hack to allow transitions of linear-gradient backgrounds.
 // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

web/styles/breakpoints.sass

@@ -1,3 +1,7 @@
+/////////////////////////
+//     BREAKPOINTS     //
+/////////////////////////
+  
 $desktop: 1300px;
 $laptop: 1080px;
 $tablet: 900px;

web/styles/colors.sass

@@ -1,10 +1,16 @@
-/* colors */
+/////////////////////////
+//     BASE COLORS     //
+/////////////////////////
+
 $white: #FFFFFF
 $grey-dark: #363131
 $grey-light: #BDBDBD
 $grey-slate: #9195A5
 
-/* classes */
+/////////////////////////
+//    COLOR CLASSES    //
+/////////////////////////
+
 $error:               #EB5757  // figma "red"
 $error-dark:          #D41818  // figma "dark red"
 $primary:             #21258A  // figma "body text"
@@ -13,11 +19,17 @@ $secondary:           #00BCBC  // figma "link text"
 $secondary-highlight: #00D5D5  // figma "link text/hover"
 $background:          #F2F7FE
 
-/* gradients */
+/////////////////////////
+//      GRADIENTS      //
+/////////////////////////
+
 $gradient-primary:           linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
 $gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
 $gradient-primary-subdued:   linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%);
 $gradient-secondary:         linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
 
-/* misc */
+/////////////////////////
+//         MISC        //
+/////////////////////////
+
 $shadow: rgba(0, 82, 174, 0.15)

web/styles/decoration.sass

@@ -1,3 +1,7 @@
+/////////////////////////
+// ELEMENT DECORATIONS //
+/////////////////////////
+
 .shadow
   box-shadow: 0px 4px 6px $shadow