Merge pull request #120 from Web-Dev-Path/chore/footer-revamp-social-media

Chore/footer revamp social media

Author: klezi10

CHANGELOG.md

@@ -51,9 +51,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - component file structure
 - ButtonLink.js styles
-
-### Changed
-
 - components folder structure
 - relative to absolute imports with aliases
 - updated to React 18 and Next.js latest
+- footer styling update + social media icons

components/layout/Footer.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import footerStyles from '@/styles/Footer.module.scss';
-import { linksNav } from '@/utils/links';
+import { linksNav, linksSocial } from '@/utils/links';
 import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
 import Container from '@/components/containers/Container';
@@ -10,17 +10,6 @@ export default function Footer() {
     <footer className={footerStyles.footer}>
       <NewsletterSubscribe />
       <Container className={footerStyles.footer__inner}>
-        <nav className={footerStyles.footer__nav} aria-label='Main'>
-          <ul className={footerStyles.footer__navList}>
-            {linksNav.map(link => (
-              <li className={footerStyles.footer__navItem} key={link.text}>
-                <Link href={link.href}>
-                  <a title={link.text}>{link.text}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
         <Link href='/'>
           <a className={footerStyles.footer__logo} title='Go to the Homepage'>
             <Image
@@ -31,6 +20,37 @@ export default function Footer() {
             />
           </a>
         </Link>
+        <div className={footerStyles.footer__navSocialsDiv}>
+          <nav className={footerStyles.footer__nav} aria-label='Main'>
+            <ul className={footerStyles.footer__navList}>
+              {linksNav.map(link => (
+                <li className={footerStyles.footer__navItem} key={link.text}>
+                  <Link href={link.href}>
+                    <a title={link.text}>{link.text}</a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+          <div className={footerStyles.footer__socialIcons}>
+            <ul className={footerStyles.footer__socialList}>
+              {linksSocial.filter(link => link.isVisible).map(link => (
+                <li className={footerStyles.footer__socialItem} key={link.text}>
+                  <Link href={link.href}>
+                    <a title={link.text} target='_blank'>
+                      <Image
+                        href={link.href}
+                        src={link.src}
+                        height={65}
+                        width={47}
+                      />
+                    </a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
       </Container>
       <Container>
         <p className={footerStyles.footer__copyright}>

next.config.js

@@ -5,5 +5,6 @@ module.exports = withPWA({
     dest: 'public',
     register: true,
     skipWaiting: true,
+    disable: process.env.NODE_ENV === 'development',
   },
 });

public/images/svg/GitHub.svg

@@ -17,7 +17,13 @@
     }
   }
 
+  &__navSocialsDiv {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__nav {
+
     @include tablet {
       min-width: 6.5rem;
       order: 2;
@@ -30,10 +36,18 @@
 
   &__navList {
     padding: 0;
+
+    @include tablet {
+      display: flex;
+    }
   }
 
   &__navItem {
     margin: 0.5rem 0;
+    
+    @include tablet {
+      padding-left: 50px;
+    }
   }
 
   &__logo {
@@ -52,10 +66,39 @@
     }
   }
 
+  &__socialList {
+    display: flex;
+    justify-content: center;
+    margin: revert;
+    padding: 0;
+
+    @include tablet {
+      justify-content: end;
+    }
+  }
+
+  &__socialItem {
+    cursor: pointer;
+    @include transition(all 0.3s ease);
+
+    &:hover {
+      opacity: 0.6;
+    }
+
+    @include tablet {
+      padding-left: 28px;
+      max-width: 100%;
+    }
+  }
+
   &__copyright {
     text-align: center;
     margin: 0;
     font-size: 1rem;
     padding-bottom: 2.5rem;
+
+    @include tablet {
+      text-align: end;
+    }
   }
 }

public/images/svg/LinkedIn.svg

@@ -12,14 +12,23 @@ export const linksNav = [
 export const linksSocial = [
   {
     id: 1,
-    text: 'Github',
+    text: 'LinkedIn',
     href: '#',
-    src: '/images/svg/iconmonstr-github.svg',
+    src: '/images/svg/LinkedIn.svg',
+    isVisible: false,
   },
   {
     id: 2,
-    text: 'Twitter',
-    href: '#',
-    src: '/images/svg/iconmonstr-twitter.svg',
+    text: 'YouTube',
+    href: 'https://www.youtube.com/channel/UCCLwmU7r4IUWZOtH3bCEN6g',
+    src: '/images/svg/YouTube.svg',
+    isVisible: true,
+  },
+  {
+    id: 3,
+    text: 'GitHub',
+    href: 'https://github.com/Web-Dev-Path',
+    src: '/images/svg/GitHub.svg',
+    isVisible: true,
   },
 ];