[React] 네비게이션 바 토글 리스트

const [isOpen, setOpen] = useState(false);

useState 설정하는 코드

배열의 첫번째 인자는 상태값, 두번째 인자는 function을 받아온다.

리스트가 닫혀 있는 상태를 기본값으로 주기 위해서 useState()에 false를 인자로 설정해준다.

 

<button
	className="toggle-list"
	onClick={() => {
		setOpen((isOpen) => !isOpen);
	}}
	style={{
		border: "0px",
	}}
>
	<FontAwesomeIcon icon={faBars} size="2x" />
</button>

토글 리스트 버튼

onClick 함수 람다식을 이용해서 state 상태가 true면 false, false면 true로 상태를 바꾸게 설정한다.

 

{isOpen && (
          <p className="show-menu">
            닉네임 님
            <table>
              <tr>
                <td>
                  <button>마이페이지</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>나의 북마크</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>나의 활동</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>로그아웃</button>
                </td>
              </tr>
            </table>
          </p>
        )}

리스트를 열면 보이는 메뉴 코드

&& 연산자를 사용해서 state 상태가 true일 경우에만 보이도록 설정한다.

 

내부 버튼들 열을 맞춰주기 위해서 테이블 안에 넣어놨다. (일단은..?)

닉네임 님으로 적어놓은 부분도 나중에 로그인, 세션 완성되면 유저 닉네임을 가져오도록 연결시켜야한다.

 

 

아래는 전체 코드

import logo from "../assets/logo.svg";
import "../App.css";
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { faBell } from "@fortawesome/free-solid-svg-icons";

const Header = () => {
  const [isOpen, setOpen] = useState(false);

  return (
    <div className="nav-bar">
      <div className="nav-bar-column"></div>
      <div className="nav-bar-column">
        <img src={logo}></img>
      </div>
      <div className="nav-bar-column">
        <FontAwesomeIcon icon={faMagnifyingGlass} size="2x" />
        <span className="nav-notification"> </span>
        <FontAwesomeIcon icon={faBell} size="2x" />
        <button
          className="toggle-list"
          onClick={() => {
            setOpen((isOpen) => !isOpen);
          }}
          style={{
            border: "0px",
          }}
        >
          <FontAwesomeIcon icon={faBars} size="2x" />
        </button>
        {isOpen && (
          <p className="show-menu">
            닉네임 님
            <table>
              <tr>
                <td>
                  <button>마이페이지</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>나의 북마크</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>나의 활동</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button>로그아웃</button>
                </td>
              </tr>
            </table>
          </p>
        )}
      </div>
    </div>
  );
};

export default Header;

 

 

토글 리스트 부분 css

.show-menu {
  width: 250px;
  height: 300px;
  position: absolute;
  transition: 1s;
  border: #282c34 1px solid;
  border-radius: 10px;
  right: 1%;
  top: 70%;
  background-color: #d9d9d9;
  color: #000;
  padding: 10px;
  font-family: "NanumSquareBold";
  font-size: 20px;
}

.show-menu button {
  width: 230px;
  height: 45px;
  border-radius: 10px;
  margin-top: 10px;
}

.show-menu table {
  margin-top: 10%;
}

.toggle-list {
  transition: 1s;
}

 

 

실행 화면

기본 상태

리스트 아이콘을 눌렀을 때!

 

이제 걸음마를 뗐지만.. 꽤나 재밌다..