[JavaScript] 반응형 사이드 바 제작

이 전에 제작했던 반응형 내비게이션 바와 동일한 방식으로 작성했다.

👉👉반응형 내비게이션 바 제작보러가기

CSS파일 분석은 생략하고

app.js 작성을 바로 시작해보자.

// sidebar-toggle 클래스를 가진 요소를 DOM에서 선택하여 변수에 할당

const toggleBtn = document.querySelector('.sidebar-toggle');

// close-btn 클래스를 가진 요소를 DOM에서 선택하여 변수에 할당

const closeBtn = document.querySelector('.close-btn');

// sidebar 클래스를 가진 요소를 DOM에서 선택하여 변수에 할당

const sidebar = document.querySelector('.sidebar');

여기까지는 내비게이션 바 제작했을 때 처럼 어느 부분의 코드인지만 인지하면서 작성하였다.

// toggleBtn 요소에 대한 클릭 이벤트 리스너를 추가합니다.

toggleBtn.addEventListener('click', function() {});

이 버튼을 눌렀을 때 function 안이 실행되기 때문에 sidebar 클래스를 가진 요소가 보여질 수 있게하는 코드를 이 안에 작성해야한다.

// sidebar 요소의 클래스 목록에 show-sidebar 클래스가 있으면 제거, 없으면 추가

toggleBtn.addEventListener('click', function() {
  sidebar.classList.toggle('show-sidebar');
});

show-sidebar 의 클래스

.show-sidebar {
  transform: translate(0);
}

원래의 sidebar 클래스에서는 transform: translate(-100%);로 되어있기때문에 요소를 현재의 크기에 비례하여 왼쪽으로 이동시켜져있는 상태였다.
여기서 toggleBtn 버튼을 눌러줌으로 transform(0)으로 바꾸어 사이드바를 오른쪽으로 밀게 한다.

// closeBtn 요소에 대한 클릭 이벤트 리스너를 추가

closeBtn.addEventListener('click', function() {});

이 버튼을 눌렀을 때 function 안이 실행되기 때문에 보여지고 있는 sidebar 클래스를 가진 요소가 지워질 수 있게 하는 코드를 이 안에 작성해야한다.

// sidebar 요소의 클래스 목록에서 "show-sidebar" 클래스를

closeBtn.addEventListener('click', function() {
  sidebar.classList.remove('show-sidebar');
});

show-sidebar를 이렇게 지우면 toggleBtn요소를 누르기 전으로 다시 돌아올 수 있다.