Merge pull request #86 from Web-Dev-Path/chore/update-navbar

Update navbar with scrolly effect

Author: mariana-caldas

CHANGELOG.md

@@ -19,15 +19,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - new footer and newsletter components styling
 - TwoColumn.js component
 - decoration components
-- ThreeColumn.js and Card.js
+- nav component styling and intersection api
+- CardsColumns.js and Card.js
 
 ### Fixed
 
 - updated Next.js from 10.0.0 to 12.0.10
 - fixed scroll-x added by the layout container, adjust README
 - updated TwoColumn.js component with style props
 - updated favicon icon and add OG
-
-
-
-

components/Container.js

@@ -0,0 +1,11 @@
+import containerStyles from '../styles/Container.module.scss';
+
+export default function Container({ className, children }) {
+  return (
+    <div
+      className={`${containerStyles.container} ${className ? className : ''}`}
+    >
+      {children}
+    </div>
+  );
+}

components/Footer.js

@@ -20,7 +20,12 @@ export default function Footer() {
         </nav>
         <Link href="/">
           <a className={footerStyles.footer__logo} title="Go to the Homepage">
-            <Image src="/images/svg/logo.svg" height={326} width={326} />
+            <Image
+              src="/images/svg/logo.svg"
+              height={326}
+              width={326}
+              alt="Logo"
+            />
           </a>
         </Link>
       </section>

components/Nav.js

@@ -1,63 +1,100 @@
+import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import ButtonLink from './ButtonLink';
+import Container from './Container';
 import styles from '../styles/Nav.module.scss';
 import { linksNav } from '../utils/links';
-import Image from 'next/image';
 
 export default function Nav() {
   const [active, setActive] = useState(false);
+  const headerRef = useRef();
+  const containerRef = useRef();
 
-  //This function fixes the Navlinks position if the hamburger menu is left open while resizing the window
   useEffect(() => {
-    function setTrueSize() {
-      if (window.innerWidth >= 768) setActive(false);
-    }
-    window.addEventListener('resize', setTrueSize);
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          containerRef.current.classList.add(styles.sticky);
+        } else {
+          containerRef.current.classList.remove(styles.sticky);
+        }
+      },
+      {
+        threshold: 0,
+        rootMargin: '300px',
+      }
+    );
 
-    return () => window.removeEventListener('resize', setTrueSize);
-  });
+    if (headerRef.current) {
+      observer.observe(headerRef.current);
+    }
 
-  const toggleActive = () => {
-    setActive(active => !active);
-  };
+    return () => {
+      if (headerRef.current) {
+        observer.unobserve(headerRef.current);
+      }
+    };
+  }, []);
 
   return (
-    <header className={styles.header}>
-      <div className={`${styles.navContainer} ${styles.row}`}>
-        <div className={styles.align}>
-          <Link href="/" passHref>
-            <a>
-              <Image
-                width={86}
-                height={80}
-                className={styles.logo}
-                src="/images/web-dev-path-logo-small.png"
-                alt="Logo"
-              />
-            </a>
-          </Link>
-          <button
-            className={styles.navToggle}
-            aria-label="open navigation"
-            onClick={toggleActive}
-          >
-            <span className={styles.hamburger} />
-          </button>
-        </div>
-        <nav className={`${active ? styles.navVisible : styles.nav}`}>
-          <ul className={styles.navList}>
-            {linksNav.map(link => (
-              <li className={styles.navItem} key={link.href}>
-                <Link href={link.href}>
-                  <a className={styles.navLink} title={link.text}>
-                    {link.text}
-                  </a>
-                </Link>
+    <header className={styles.header} ref={headerRef}>
+      <Container>
+        <div ref={containerRef}>
+          <nav className={styles.nav}>
+            <div className={styles.nav__logo}>
+              <Link href="/" passHref>
+                <a>
+                  <Image
+                    src="/images/svg/logo.svg"
+                    height={115}
+                    width={180}
+                    alt="Logo"
+                  />
+                </a>
+              </Link>
+            </div>
+            <ul
+              className={`${styles.nav__links} ${active ? styles.active : ''}`}
+            >
+              {linksNav.map(({ text, href, id }) => {
+                if (text !== 'Join us') {
+                  return (
+                    <li className={styles.nav__item} key={id}>
+                      <Link href={href}>
+                        <a className={styles.nav__link} title={text}>
+                          {text}
+                        </a>
+                      </Link>
+                    </li>
+                  );
+                }
+              })}
+              <li className={styles.nav__item}>
+                <ButtonLink
+                  className={`${styles.nav__button} ${
+                    active ? styles.active : ''
+                  }`}
+                  link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
+                >
+                  Join us
+                </ButtonLink>
               </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
+            </ul>
+            <button
+              className={`${styles.nav__hamburger} ${
+                active ? styles.active : ''
+              }`}
+              onClick={() => setActive(active => !active)}
+              aria-label="toggle navigation"
+            >
+              <span className={styles.nav__hamburger__bar}></span>
+              <span className={styles.nav__hamburger__bar}></span>
+              <span className={styles.nav__hamburger__bar}></span>
+            </button>
+          </nav>
+        </div>
+      </Container>
     </header>
   );
 }

components/TwoColumn.js

@@ -59,6 +59,7 @@ export default function TwoColumn({
               className={styles.img}
               layout="fill"
               objectFit="cover"
+              priority
             />
           </div>
         )}

pages/index.js

@@ -10,8 +10,8 @@ export default function Home() {
   return (
     <section className={styles.container}>
       <div className={styles.inner}>
-        <h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
         <div className={styles.description}>
+          <h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
           <p>
             Hold our hand and enjoy the road to learn how to start a new
             project, the magic behind Github while working in a team

public/favicon.ico

@@ -5,7 +5,7 @@
   margin: 1.5rem;
   padding: 1.5rem;
   border-radius: 1.5rem;
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
+  box-shadow: $box-shadow;
   min-width: 28%;
   @include desktop {
     flex-basis: 28%;

styles/Card.module.scss

@@ -0,0 +1,7 @@
+@use './variables' as *;
+
+.container {
+  margin: 0 auto;
+  width: 90%;
+  max-width: $large-desktop-breakpoint;
+}

styles/Container.module.scss

@@ -1,140 +1,51 @@
 @import 'mixins';
 @import 'variables';
 
-hr {
-  &.divider {
-    border-top: 1px solid $primary-bg-color;
-    width: 100%;
-    margin: 4rem 0;
-  }
-}
-
 .title {
   margin: 0;
   line-height: 1.15;
   font-size: 2.5rem;
   text-align: center;
 
-  a {
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
+  @include desktop-breakpoint-plus {
+    font-size: 4.5rem;
   }
 }
 
 .description {
-  line-height: 1.5;
   font-size: 1.5rem;
   text-align: center;
   max-width: 90%;
   margin: 0 auto;
-  padding: 2rem 0 4rem;
-}
-
-.centerText {
-  text-align: center;
-  width: 90%;
-  margin: 1.5rem auto;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin: 3rem auto;
-}
-
-.card {
-  height: 13rem;
-  max-width: 40%;
-  margin: 1.5rem;
-  flex-basis: 45%;
-  padding: 1.5rem;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  @include transition(color 0.3s ease);
-  box-shadow: inset 0px 0px 0px 1px rgb(0 0 0 / 15%),
-    0px 3px 4px 2px rgb(0 0 0 / 10%);
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: $primary-content-color;
-    border-color: $primary-bg-color;
-  }
-
-  p {
-    margin: 0 1rem;
-    font-size: 1.125rem;
-    line-height: 1.5;
-    text-align: center;
-    font-weight: bold;
-  }
-}
-
-.learn_more {
-  padding: 4rem 0;
-}
-
-.button {
-  height: 2.4rem;
-  width: 8rem;
-  border-radius: 5px;
-  background-color: $primary-content-color;
-  color: $white;
-  font-size: 0.875rem;
-  border: none;
-  text-transform: uppercase;
-  transition: opacity 0.3s ease;
-
-  &:hover {
-    opacity: 0.6;
-    cursor: pointer;
-  }
+  padding: 5rem 0;
 }
 
 .bracket {
   left: 0;
   position: absolute;
   transform: translate(10rem, -5rem);
+
+  @include desktop-breakpoint-plus {
+    transform: translate(50%, -5rem);
+    width: 30%;
+  }
+
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
 }
 
 .stick {
   right: 0;
   position: absolute;
   transform: translate(-10rem, -5rem);
-}
 
-@include desktop-breakpoint-plus {
-  .title {
-    font-size: 4rem;
-  }
-
-  .bracket {
-    transform: translate(50%, -5rem);
-    width: 30%;
-  }
-
-  .stick {
+  @include desktop-breakpoint-plus {
     transform: translate(-50%, -5rem);
     width: 30%;
   }
-}
-
-@include desktop-breakpoint-minus {
-  .bracket {
-    display: none;
-  }
 
-  .stick {
+  @include desktop-breakpoint-minus {
     display: none;
   }
 }