[프로젝트][리액트] 사이드 바 구현하기

목차

 

사이드 바를 만든 것을 정리하고자 한다.

완성된 초기 모습

 

 

KaKaoMapOpenSide.tsx

import React, { useState, useRef, useCallback } from 'react';
import styles from './KaKaoMapOpenSide.module.scss';

function KaKaoMapOpenSide() {
  const [isOpen, setMenu] = useState<boolean>(false); // 메뉴의 초기값을 false로 설정

  const toggleMenu = useCallback(() => {  //토글 버튼 함수
    setMenu(!isOpen); // on,off 개념 boolean
  }, [isOpen]);

  return (  
    <div className={styles['header-button']}>
      <button
        type="button"
        className={isOpen ? styles['hide-button'] : styles['show-button']}  //state에따라 css변경
        onClick={toggleMenu}
      >
        {isOpen ? (
          <img
            className={styles['img-container']}
            src="/img/right.png"
            alt="hide-button"
          />
        ) : (
          <img
            className={styles['img-container']}
            src="/img/left.png"
            alt="show-button"
          />
        )}
      </button>

      <div className={isOpen ? styles['show-menu'] : styles['hide-menu']} />
      //열고 닫히게 메뉴를 조작한다
    </div>
  );
}

export default KaKaoMapOpenSide;

 

KaKaoMapOpenSide.module.scss

.img-container {
  height: 1rem;
  width: 1rem;
}

.show-button {
  border: none;
  position: absolute;
  top: 50%;
  left: 4rem;
  height: 3rem;
  z-index: 10;
  display: inline-block;
  font-size: 1px;
  line-height: 1px;
  background-color: #ffffff;
  transition: all 0.5s ease-in; /* 변화를 부드럽게 만듭니다. */
}

.hide-button {
  border: none;
  position: absolute;
  top: 50%;
  left: 34rem;
  height: 3rem;
  z-index: 10;
  display: inline-block;
  font-size: 1px;
  background-color: #ffffff;
  transition: all 0.5s ease-in; /* 변화를 부드럽게 만듭니다. */
}

.hide-menu {
  position: absolute;
  transition: all 0.5s ease-in;
  z-index: 5;
}

.show-menu {
  position: absolute;
  top: 0;
  z-index: 10;
  height: 100vh;
  width: 30rem;
  background-color: white;
  left: 4rem;
  transition: all 0.5s ease-in;
}