사이드바 외부 클릭시 사이드바 닫히게 하는 방법

토이프로젝트를 구현하면서 사이드바를 구현하게 되었는데, 상단 메뉴바의 햄버거 버튼을 클릭하면 사이드바가 나타나는 형태로 구현했다. 그러나 사이드바를 다시 닫을때 역시 햄버거 버튼을 클릭해야만 닫히는게 상당히 불편했고, 모바일 유저라면 더욱 불편할거라 생각해서 사이드바 영역 외의 부분을 클릭시에도 사이드바를 닫는 기능을 구현하였다.

원리

우선 사이드바의 z-index를 999로 주었다. 그리고 사이드바가 나타나게 되면 그와 동시에 화면 width와 heigt이 100%인, 즉 화면 전체를 div로 감싸며 배경이 투명색인 영역을 나타나게 했다. 여기서 중요한 것은 이 empty space의 z-index가 998이라는 것. 그렇게 되면 z-index가 999인 사이드바만 empty space 영역 앞에 나타나게 된다. 이 상태에서 empty space에 onClick 속성으로 사이드바를 닫는 함수를 넘겼다.

간단하게 코드를 보면

<React.Fragment>
  <SideBar showSideBar={showSideBar}>
    <HambergerIcon
      size="48"
      color="#534847"
      onClick={this.onClickHambergerButton}
    />
  </SideBar>
  // empty space 부분
  <OuterToToggleSideBar
    showSideBar={showSideBar}
    onClickEmptySpace={this.onClickEmptySpace}
  />
</React.Fragment>

SideBar와 OuterToToggleSideBar 두 영역 모두 this.state.showSideBar가 true이면 나타나게 한다.

추가적으로 두 영역의 css이다.

const SideBarLayout = styled.div`
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  position: absolute;
  position: fixed;
  left: 0;
  width: 250px;
  height: 100vh;
  background-color: white;
  z-index: 999;
`;

const EmptySpaceToToggleSideBar = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 998;
  opacity: 0.5;
  background-color: gray;
  position: fixed;
`;

고찰

이 방법에는 정상 작동 하지만 약간의 문제점이 있다. 이렇게 구현하게되면 사이드 바가 나타난 상태에서, 외부의 어떤 버튼이나 input에 값을 바로 선택할 수 없게된다. 버튼을 클릭하여도 그 영역은 사실 투명색인 empty space가 덮여져 있기 떄문이다. brunch 사이트같은 경우에는 사이드바가 나타난 상태에서도 외부 버튼이 클릭가능하다. 그게더 좋은 방법이지만 어떻게 가능한지 아직은 모르겠다. 시간이 나면 다시 이 부분을 연구해봐야겠다. 일단은 사이드바가 나타났을 때 외부 버튼클릭이 되지 않음을 알리기 위해 empty space의 배경색을 회색으로 바꾸고 opacity를 할당했다.