Add styling to navbar

Author: manecipoglu

components/Footer.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import footerStyles from '../styles/Footer.module.scss';
-import { footerNavLinks } from '../utils/links';
+import { linksNav } from '../utils/links';
 import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
 
@@ -11,7 +11,7 @@ export default function Footer() {
       <section className={footerStyles.footer__section}>
         <nav className={footerStyles.footer__nav} aria-label="Main">
           <ul className={footerStyles.footer__navList}>
-            {footerNavLinks.map(link => (
+            {linksNav.map(link => (
               <li className={footerStyles.footer__navItem} key={link.text}>
                 <Link href={link.href}>{link.text}</Link>
               </li>

components/Nav.js

@@ -1,30 +1,17 @@
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styles from '../styles/Nav.module.scss';
-import { headerNavLinks } from '../utils/links';
 import Image from 'next/image';
+import ButtonLink from './ButtonLink';
+import buttonStyles from '../styles/ButtonLink.module.scss';
 
 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);
-  };
+  const [active, setActive] = useState(true);
 
   return (
     <header className={styles.header}>
-      <div className={`${styles.navContainer} ${styles.row}`}>
-        <div className={styles.align}>
+      <nav className={styles.nav}>
+        <div className={styles.nav__logo}>
           <Link href="/" passHref>
             <a>
               <Image
@@ -35,28 +22,52 @@ export default function Nav() {
               />
             </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}>
-            {headerNavLinks.map(link => (
-              <li className={styles.navItem} key={link.href}>
-                <Link href={link.href}>
-                  <a className={styles.navLink} title={link.text}>
-                    {link.text}
-                  </a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
+        <ul className={`${styles.nav__links} ${active ? styles.active : ''}`}>
+          <li className={styles.nav__item}>
+            <Link href="/about-us">
+              <a className={styles.nav__link} title="About">
+                About
+              </a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <Link href="/blog">
+              <a className={styles.nav__link} title="Blog">
+                Blog
+              </a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <Link href="/contact-us">
+              <a className={styles.nav__link} title="Contact">
+                Contact
+              </a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <ButtonLink
+              styles={{
+                color: 'black',
+                backgroundColor: 'white',
+                minWidth: '9rem',
+              }}
+              className={buttonStyles.btn}
+              link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
+            >
+              Join us
+            </ButtonLink>
+          </li>
+        </ul>
+        <div
+          className={`${styles.nav__hamburger} ${active ? styles.active : ''}`}
+          onClick={() => setActive(active => !active)}
+        >
+          <span className={styles.nav__hamburger__bar}></span>
+          <span className={styles.nav__hamburger__bar}></span>
+          <span className={styles.nav__hamburger__bar}></span>
+        </div>
+      </nav>
     </header>
   );
 }