Seperate header and footer links, add new logo to header

Author: manecipoglu

components/Footer.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
+import { footerNavLinks } 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}>
-            {linksNav.map(link => (
+            {footerNavLinks.map(link => (
               <li className={footerStyles.footer__navItem} key={link.text}>
                 <Link href={link.href}>{link.text}</Link>
               </li>
@@ -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,7 +1,7 @@
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import styles from '../styles/Nav.module.scss';
-import { linksNav } from '../utils/links';
+import { headerNavLinks } from '../utils/links';
 import Image from 'next/image';
 
 export default function Nav() {
@@ -28,10 +28,9 @@ export default function Nav() {
           <Link href="/" passHref>
             <a>
               <Image
-                width={86}
-                height={80}
-                className={styles.logo}
-                src="/images/web-dev-path-logo-small.png"
+                src="/images/svg/logo.svg"
+                height={115.54}
+                width={180}
                 alt="Logo"
               />
             </a>
@@ -46,7 +45,7 @@ export default function Nav() {
         </div>
         <nav className={`${active ? styles.navVisible : styles.nav}`}>
           <ul className={styles.navList}>
-            {linksNav.map(link => (
+            {headerNavLinks.map(link => (
               <li className={styles.navItem} key={link.href}>
                 <Link href={link.href}>
                   <a className={styles.navLink} title={link.text}>

styles/Nav.module.scss

@@ -8,7 +8,8 @@
 
 .header {
   width: 100%;
-  padding: 1em 0;
+  padding: 2.25rem 0;
+  background-color: $dark-bg-color;
 }
 
 .align {
@@ -91,24 +92,14 @@
 
 .navLink {
   text-decoration: none;
-  color: $primary-content-color;
+  color: $white;
 
   &:focus,
   &:hover {
     opacity: 0.6;
   }
 }
 
-.logo {
-  border-radius: 50%;
-  height: 5em;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.6;
-  }
-}
-
 @media (min-width: $tablet-breakpoint) {
   .navToggle {
     display: none;

utils/links.js

@@ -1,4 +1,4 @@
-export const linksNav = [
+export const footerNavLinks = [
   {
     text: 'Join us',
     href: 'https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email',
@@ -8,6 +8,16 @@ export const linksNav = [
   { text: 'Contact Us', href: '/contact-us' },
 ];
 
+export const headerNavLinks = [
+  { text: 'About', href: '/about-us' },
+  { text: 'Blog', href: '/blog' },
+  { text: 'Contact', href: '/contact-us' },
+  {
+    text: 'Join us',
+    href: 'https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email',
+  },
+];
+
 export const linksSocial = [
   { text: 'Github', href: '#', src: '/images/svg/iconmonstr-github.svg' },
   { text: 'Twitter', href: '#', src: '/images/svg/iconmonstr-twitter.svg' },