Merge pull request #41 from MarianaSouza/feature/add-header-navbar

Feature/add header navbar

Author: rebecatschiedel

README.md

@@ -1,5 +1,15 @@
 ![Web Developer Path Logo](/images-web-dev-path/web-dev-path-logo.png)
 
+# Quickstart
+
+To run this project locally do the following steps:
+
+- [Git clone this repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository)
+- npm install
+- npm run dev
+
+Our website is live at [WebDevPath](https://webdevpath.co/).
+
 # Web Developer Path
 
 In this repository, you will find content and resources related to the practical steps to land your first job as a web developer.
@@ -50,29 +60,34 @@ These are the videos that explain in detail how to branch out and submit a PR:
   - [GitHub Markdown](https://guides.github.com/features/mastering-markdown/)
 
 * **Harvard**
-    - [CS50x - Introduction to Computer Science](https://cs50.harvard.edu/x/2020/)
-    - [CS50 Beyond - design and implementations of web apps](https://cs50.harvard.edu/beyond/2019/)
+
+  - [CS50x - Introduction to Computer Science](https://cs50.harvard.edu/x/2020/)
+  - [CS50 Beyond - design and implementations of web apps](https://cs50.harvard.edu/beyond/2019/)
 
 * **JavaScript**
-    - [Learn JavaScript by Codecademy](https://www.codecademy.com/learn/introduction-to-javascript)
+
+  - [Learn JavaScript by Codecademy](https://www.codecademy.com/learn/introduction-to-javascript)
 
   **JS Libraries and Frameworks**
   <br />
-  - _**React**_ 
+
+  - _**React**_
     - [React Handbook for Beginners](https://www.freecodecamp.org/news/react-beginner-handbook/)
     - [React Functional Components, Props, and JSX – React.js Tutorial for Beginners](https://www.freecodecamp.org/news/react-components-jsx-props-for-beginners/)
 
 * **PHP**
+
   - [PHP Tutorial](https://www.w3schools.com/php/DEFAULT.asp)
 
 * **Python**
   - [Best Python Tutorials](https://www.freecodecamp.org/news/best-python-tutorial/)
 
 - **WordPress**
+
   - [How to Make a Custom Website from Scratch using WordPress (Theme Development) by freeCodeCamp ](https://youtu.be/KibbYf9avko)
-  - [Professional WordPress Theme & Plugin Development](https://www.udemy.com/course/photoshop-psd-to-wordpress-theme-development-from-scratch/) 
+  - [Professional WordPress Theme & Plugin Development](https://www.udemy.com/course/photoshop-psd-to-wordpress-theme-development-from-scratch/)
   - [WordPress Plugin Development](https://youtu.be/mm9aQiLEa10)
-  
+
   <br />
   <br />
 
@@ -96,18 +111,18 @@ These are the videos that explain in detail how to branch out and submit a PR:
 
 - **Launching A Website**
   - [How to Put a Website Online: Template, Coding, Domain, Hosting, and DNS](https://youtu.be/NQP89ish9t8)
-  
+
 <br />
 <br />
 
 ## Presentation
 
 - **A Junior Web Developer Resume**
+
   - [How to write an awesome junior developer résumé in a few simple steps, by freeCodeCamp](https://www.freecodecamp.org/news/how-to-write-an-awesome-junior-developer-resume-in-a-few-simple-steps-316010db80ec/)
 
 - **Your LinkedIn**
   - [Tips to Optimize your LinkedIn Profile for Developers](https://www.samanthaming.com/blog/tips-to-optimize-your-linkedin-profile-for-developers/)
 
 <br />
 <br />
-

components/Footer.js

@@ -0,0 +1,21 @@
+import footerStyles from "../styles/Footer.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={footerStyles.footer}>
+      <a
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={footerStyles.a}
+      >
+        Powered by{" "}
+        <img
+          src="/vercel.svg"
+          alt="Vercel Logo"
+          className={footerStyles.logo}
+        />
+      </a>
+    </footer>
+  );
+}

components/Layout.js

@@ -0,0 +1,15 @@
+import Nav from "./Nav";
+import styles from "../styles/Layout.module.css";
+import Footer from "./Footer";
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Nav />
+      <div className={styles.container}>
+        <main className={styles.main}>{children}</main>
+      </div>
+      <Footer />
+    </>
+  );
+}

components/Nav.js

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import styles from "../styles/Nav.module.css";
+
+export default function Nav() {
+  const [active, setActive] = useState(false);
+
+  //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);
+
+    return () => window.removeEventListener("resize", setTrueSize);
+  });
+
+  const toggleActive = () => {
+    setActive((active) => !active);
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={`${styles.navContainer} ${styles.row}`}>
+        <div className={styles.align}>
+          <Link href="/">
+            <img
+              className={styles.logo}
+              src="/images/web-dev-path-logo-small.png"
+              alt="Logo"
+            />
+          </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}>
+            <li className={styles.navItem}>
+              <Link href="/about-us">
+                <a className={styles.navLink}>About Us</a>
+              </Link>
+            </li>
+            <li className={styles.navItem}>
+              <Link href="/blog">
+                <a className={styles.navLink}>Blog</a>
+              </Link>
+            </li>
+            <li className={styles.navItem}>
+              <Link href="/contact-us">
+                <a className={styles.navLink}>Contact Us</a>
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}