[개발일지02/🌉포폴사이트 JS] 햄버거 버튼을 사용하여 요소를 토글할 때 Tailwind에서는 어떤 클래스를 사용하면 좋을까?

now() 2024. 3. 18. 19:46

👀 모바일 해상도가 되면 햄버거 버튼에 nav가 숨겨지게 된다. 이때 자바스크립트를 활용하여 버튼 클릭 시 요소를 보여주거나 숨겨줘야 하는데, CSS라면 active 클래스를 활용할 수 있지만 tailwind로는 어떻게 처리해야하는지 궁금해졌다.

햄버거 버튼을 자바스크립트 이벤트로 처리해주는 것은 일반 CSS와 동일하다.

먼저, 햄버거 버튼에 ID를 할당해주고, 해당 요소를 가져와 클릭 이벤트를 통해 토글 기능을 추가해준다.

🤔 어떤 요소를 조작하고 싶은가?

현재 모바일 해상도가 되면 햄버거 버튼으로 헤더의 아이콘이 변경되게 만들어져있는데, 우리가 조작해야하는 요소는 햄버거 버튼과 버튼을 눌렀을 때 보여질 nav 요소이다.

<!-- Mobile Menu Button -->
<div class="inset-y-0 left-0 flex items-center md:hidden">
<button
  id="mobile-button"
  type="button"
  name="test"
  class="text-black inline-flex items-center justify-center"
>
  <svg> <!-- 햄버거 버튼 --> </svg>
</button>

<!-- Mobile Menu List -->
<div class="hidden md:hidden" id="mobile-menu">
<ul class="font-LINESeedKR-Bd text-dark-gray px-10 pt-3 pb-3">
  <li class="hover:text-black">
    <a
      href="#about"
      aria-label="About으로 이동"
      class="active:text-green block pt-2 pb-3 text-center"
      >About</a
    >
  </li>
  <!-- 그 외 모바일 nav 메뉴들 -->
</ul>
</div>

📑 Tailwind에서 사용할 수 있는 클래스

Tailwind에서는 토글 기능을 위해 display: none 속성을 가진 hidden 클래스를 사용할 수 있다. hidden 클래스를 추가하거나 삭제함으로써 요소를 화면에서 숨기거나 보여줄 수 있다.

먼저 조작할 요소를 querySelector을 통해 가져오자.

const $menuBtn = document.querySelector("#mobile-button");
const $mobileMenu = document.querySelector("#mobile-menu");

이제 $menuBtn에 이벤트 리스너를 달아주고, 이벤트 리스너가 동작할 때마다 조건에 따라 hidden 클래스를 처리해주면 된다.

hidden 클래스를 조작하는 방법은 간단하게 두 가지로 나눌 수 있다.

방법 1. add, remove 이벤트 활용

방법 2. toggle 이벤트 활용

이번엔 간단한 toggle 이벤트를 사용하기로 했다.

(add와 remove를 합친 것처럼 동작하는 게 toggle 클래스이지 않을까 싶다.)

// 햄버거 버튼 클릭시
$menuBtn.addEventListener("click", () => {
  // 메뉴에 클래스 추가/삭제
  $mobileMenu.classList.toggle("hidden");
});

햄버거 버튼을 클릭했을 때 $mobileMenu 클래스에 hidden이 존재하면 hidden을 삭제하고, 존재하지 않는다면 hidden을 추가해 줌으로써 요소를 숨기고 보여줄 수 있게 된다.

버튼을 눌렀을 때 X 아이콘으로 변경되는 처리는 이벤트 위임에 대해 더 공부하고 적용해보기로!

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!