DAY 25 Full Screen Modal - Follow Us

这个部分主要是 social media 的区块，会用到 fontawesome 上的 icon 们，需要 facebook、IG、Youtube 跟分享符号等等，先来 fontawesome 上找到这些 icon 们

这边要注意一个小坑，我们之前 import icon 的时候，都是使用 @fortawesome/free-solid-svg-icons 但是 brand 系列是另一套，所以要再使用 yarn 来 add brand 这套 icon，才会有 social media 系列

yarn add @fortawesome/free-brands-svg-icons

再来 import 就可以了，这边也补上了 follow us 的文字内容并设定 class，要注意的是 follow us 的部分是接在第三栏下方的，所以 top border 也要设定成粗体的白线样式！

// Header.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {
  faBars,
  faAngleDown,
  faTimes,
  faShareAlt,
} from "@fortawesome/free-solid-svg-icons";

import {
  faFacebookF,
  faInstagram,
  faYoutube,
} from "@fortawesome/free-brands-svg-icons";

export default function Header() {
  //...
  return (
    <nav className="header">
      <div className={modalOpen === true ? "modal show" : "modal"}>
        <div className="modal-dialog">
          <div className="modal-content">
            //...
            <div className="modal-body">
							//...
              <div className="modal-column">
                {info.map(function (item) {
                  return (
                    <div>
                      <a href="/">{item}</a> <hr />
                    </div>
                  );
                })}
                <div className="follow-us">follow us</div>
                <FontAwesomeIcon
                  icon={faFacebookF}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faInstagram}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faYoutube}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faShareAlt}
                  className="social-media"
                  size="2x"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

sass 的部分

// _modal.sass

.modal-column
    vertical-align: top
    border-top: 1.5px solid $primary-background-color
    width: 29vw
    display: inline-block
    margin: 16px
    
		//...

    .follow-us
        color: $dark-gray
        text-transform: uppercase
        border-top: 1px solid $primary-background-color
        padding-top: 8px
        margin-top: 32px

    .social-media
        width: 20px
        height: 20px
        display: inline-block
        border-radius: 60px
        border: 1px solid $darker-gray
        padding: 13px
        margin: 13px 13px 13px 0

        &:hover
            color: $secondary-color
            border: 1px solid $secondary-color
            cursor: pointer
            transition: 0.3s