구현

• 아래 사진의 토글 버튼을 클릭하면 사이드 nav바 나온다. (나온 상태에서 다시 누르면 들어감)
  
  body 아래
  nav - header -container - modal이 존재
  nav가 나오게하려면 누르는 순간 => body를 flex로 만들어 노출
  nav가 나오게하려면 누르는 순간 => header container를 nav크기 만큼 옆으로 이동 시킴.

nav크기만큼 옆으로 이동시키기

• 우선 nav의 크기를 가져온다

toggleBtn.addEventListener("click", (e) => {
  if (nav.style.transform === "") {
    //   나올때
    nav.style.transform = "translateX(0px)";
    body.style.display = "flex";
    contents.style.transform = `translateX(${nav.offsetWidth}px)`;

    return;
  }
  if ((nav.style.transform = "translateX(0px)")) {
    nav.style.transform = "";
    body.style.display = "";
    contents.style.transform = "translateX(0px)";
    return;
  }
});

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  transition: transform 0.3s ease;
}

body.show-nav {
  /* Width of nav */
  transform: translateX(200px);
}

다음과 같이 정의해두면 자연스럽게 구현된다. 애초에 자신의 크기만큼 옆으로 밀어놓았었음.

nav {
  background-color: var(--primary-color);
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  z-index: 100;
  <-- 이부분 -->
  transform: translateX(-100%);
}

클로저를 이용한 구현

const toggleBtn = document.querySelector("#toggle");
const ctaBtn = document.querySelector(".cta-btn");
const closeBtn = document.querySelector(".close-btn");

const btnHandler = (elementName, className) => {
  const element = document.querySelector(elementName);
  return () => {
    element.classList.toggle(className);
  };
};
toggleBtn.addEventListener("click", btnHandler("body", "show-nav"));
ctaBtn.addEventListener("click", btnHandler(".modal-container", "show-modal"));
closeBtn.addEventListener(
  "click",
  btnHandler(".modal-container", "show-modal")
);

el

배운점

• fixed로 요소 고정시 자신의 컨텐츠 만큼 크기갖게 바뀌어버림

body {
  margin: 0;
  width: 100%;
}
nav {
  background-color: var(--primary-color);
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  color: #fff;
  position: fixed;
  width: inherit;
  /* top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  z-index: 100; */
}

부모요소를 width:100%를 정한 후 고정 요소(자식인 경우) width:inherit 하면 원래 자신의 요소 크기로 돌아간다.

• 요소 크기 구하기

1. element.offsetWidth (Height)

   element.offsetWidth는 margin을 제외한, padding값, border값까지 계산한 값을 가져온다. (일반적으로 많이쓰임)

2. element.clientWidth (Height)

   element.clientWidth는 margin값과 border값이 제외된, padding값까지만 적용된 내부의 실제 크기를 가져온다. border(테두리)는 외부에 속한다.

3. element.scrollWidth (Height)

   element.scrollWidth (Height)는 스크롤 영역일때 스크롤로 감싸여진 내용의 전체 크기를 가져온다.

4. element.getBoundingClientRect();
   

• 변수에 함수넣기