리액트 : 반응형 사이드 바 (햄버거 메뉴 🍔 )

 

[핵심]

(1) input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id'

(2) 🍔 햄버거 모양 : span으로 만들기 * 3개

(3) 토글되면 햄버거 => x 모양으로 변경되며 사이드바 사용

 

(1) 🍔 햄버거 모양 구현 : input 태그 + label 태그

[NavBar.jsx] : return 문 안의 ui구현

<ScDivIcon>

          <input type="checkbox" id="menuicon"></input>

          <label htmlFor="menuicon">

            <span></span>

            <span></span>

            <span></span>

          </label>

          <StDivSidebar className="sidebar">

            <ul>

              <li

                onClick={() => {

                  navigate('/top');

                }}

              >

                TOP

              </li>

              <li

                onClick={() => {

                  navigate('/bottom');

                }}

              >

                Bottom

              </li>

              <li

                onClick={() => {

                  navigate('/acc');

                }}

              >

                Accessories

              </li>

              <li

                onClick={() => {

                  navigate('/hit');

                }}

              >

                HIT

              </li>

            </ul>

          </StDivSidebar>

        </ScDivIcon>

▶ input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id'

: 이렇게 해야 햄버거모양을 누르면 checkbox의 checked 상태로 토글이 가능해짐

 

 

(2) 🍔 햄버거 모양 : span으로 만들기 * 3개

[NavBar.jsx] : styled-components로 css 수정

const ScDivIcon = styled.div`

  width: 140px;

  margin-left: 20px;

  & input {

    display: none;

    padding-left: 60px;

  }

  & label {

    display: block;

    width: 35px;

    height: 23px;

    position: relative;

    cursor: pointer;

  }

  & span {

    z-index: 900;

    display: block;

    position: absolute;

    width: 100%;

    height: 5px;

    border-radius: 25px;

    background-color: #fff;

    transition: all 0.35s;

  }

  & span:nth-child(1) {

    /* 첫번째 span 요소*/

    top: 0;

  }

  & span:nth-child(2) {

    /* 두번째 span 요소*/

    top: 50%;

    transform: translateY(-50%);

  }

  & span:nth-child(3) {

    /* 세번째 span 요소*/

    bottom: 0;

  }

  & input:checked + label span:nth-child(1) {

    top: 50%;

    transform: translateY(-50%) rotate(45deg);

  }

  & input:checked + label span:nth-child(2) {

    opacity: 0;

  }

  & input:checked + label span:nth-child(3) {

    bottom: 50%;

    transform: translateY(50%) rotate(-45deg);

  }

  & input:checked + label + .sidebar {

    left: 0;

  }

`;

▶ 첫번째 span 요소 : span:nth-child(1)

: 햄버거 모양일때, 위치 top 0

: 엑스 모양일때, 위치 top : 50% + transform사용해서 (ㅡ) > (/) 모양으로 변경

▶ 두번째 span & 세번째 span도 유사

 

(3) 🍔 햄버거 모양 : 토글되면서 사이드바 보여주기

[NavBar.jsx] : styled-components로 css 수정

const StDivSidebar = styled.div`

  width: 270px;

  height: 400px;

  background-color: #333;

  position: fixed;

  top: 0;

  left: -270px;

  z-index: 1;

  transition: left 0.35s;

  & li {

    margin-left: 30px;

    padding-top: 20px;

    margin-top: 50px;

  }

`;

▶햄버거 모양일때는 letf:-270px로 화면에서 안 보이게 숨겨 놓고 

클릭시, width:270px이 나오는 원리