리액트에서는 일케함 Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(4)

이렇게 해결함

import React, { useRef, useState } from "react";
import styled from "styled-components";
import { Container } from "../components/styled/container";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faGoogle, faTwitter } from "@fortawesome/free-brands-svg-icons";

const Temp = styled(Container)<{ isShow: boolean }>`
  width: 100%;
  height: inherit;
  background-color: #ccc;

  display: flex;
  align-items: center;

  font-size: 1rem;
  color: black;

  header {
    .trigger {
      display: none;
    }

    width: 100%;
    height: 60px;
    background-color: #0099ff;

    display: flex;
    justify-content: center;
    align-items: center;

    nav {
      width: 1280px;

      display: flex;
      justify-content: space-between;

      .logo {
        img {
          filter: invert(100%);
        }
        img:hover {
          filter: invert(10%);
        }
      }

      .gnb {
        display: flex;
        white-space: nowrap;

        li {
          a {
            color: #fff;
            margin: 10px;
          }
          a:hover {
            color: #ff7675;
          }
        }
      }

      .sns {
        white-space: nowrap;
        a {
          color: #fff;
          margin: 5px;
        }
        a:hover {
          color: #ff7675;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    header {
      width: 100%;
      height: auto;

      nav {
        flex-direction: column;
        position: relative;
        .logo {
          margin: 10px 0 5px 10px;
        }

        .gnb {
          border-top: 1px solid #1482ff;
          flex-direction: column;
          text-align: center;
          display: ${(props) => (props.isShow ? "block" : "none")};
          li > a {
            color: #fff;
            margin: 0;
          }

          a {
            padding: 5px;
            display: block;
          }
        }
        .sns {
          display: ${(props) => (props.isShow ? "block" : "none")};
          text-align: center;
          padding: 0 5px;
          background-color: #81ecec;
          a {
            /* border: 1px solid red; */
            display: inline-block;
            margin: 0 10px;
            font-size: 1.2rem;
            padding: 3px 8px;
          }
        }

        .trigger {
          cursor: pointer;
          /* border: 1px solid black; */
          display: block;
          width: 25px;
          height: 15px;
          position: absolute;
          top: 15px;
          right: 15px;
          span {
            background-color: #fff;
            height: 1px;
            position: absolute;
            width: 100%;
            transition: 0.3s ease-out;
          }
          span:nth-child(1) {
            top: 0px;
          }
          span:nth-child(2) {
            top: 50%;
          }
          span:nth-child(3) {
            top: 100%;
          }
        }
        .trigger.active {
          span:nth-child(1) {
            top: 50%;
            transform: rotate(45deg);
          }
          span:nth-child(2) {
            opacity: 0;
          }
          span:nth-child(3) {
            top: 50%;
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
`;

function Resume() {
  const triggerRef = useRef<HTMLDivElement>(null);
  const [isShow, setShow] = useState(false);

  function bergerToggle() {
    triggerRef.current!.classList.toggle("active");
    setShow((pre) => !pre);
  }

  return (
    <Temp isShow={isShow}>
      <header>
        <nav>
          <div className="logo">
            <a href="#none">
              <img src="images/logo.png" alt="" />
            </a>
          </div>
          <ul className="gnb">
            <li>
              <a href="#none">Home</a>
            </li>
            <li>
              <a href="#none">About</a>
            </li>
            <li>
              <a href="#none">Project</a>
            </li>
            <li>
              <a href="#none">Plan & History</a>
            </li>
            <li>
              <a href="#none">Awards</a>
            </li>
            <li>
              <a href="#none">Location</a>
            </li>
            <li>
              <a href="#none">Contact</a>
            </li>
          </ul>
          <div className="sns">
            <a href="#none">
              <FontAwesomeIcon icon={faFacebook} />
            </a>
            <a href="#none">
              <FontAwesomeIcon icon={faTwitter} />
            </a>
            <a href="#none">
              <FontAwesomeIcon icon={faGoogle} />
            </a>
          </div>
          <div ref={triggerRef} className="trigger" onClick={bergerToggle}>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </nav>
      </header>
    </Temp>
  );
}

export default Resume;