사이드바는 toggle을 이용해 없앴다가 생기게 했다가 조절을 할 수 있었다.
그런데 가끔 생각하면,, 사이드바가 다 사라지는 것이 아닌 아이콘 부분만 남기게 하는게 더 보기도 편해보이고 사용하기도 편리해보인다. 메뉴바를 이용하기 위해 메뉴 아이콘을 다시 눌러서 세부메뉴에 접근하는 것보다 아이콘을 눌러 원하는 곳에 접근도 가능하고 공간도 별로 차지하지 않아 디자인적으로 괜찮아 보인다고 생각한다.
과정
매우 간단하다...
navbar 부분과 content 부분에 active라는 클래스를 toggle해준다.
자바스크립트 부분은 같고 CSS로 조절하는거였다...
아이콘만 남기게 될 때 width가 60px이라고 하면 아래와 같이 작성하면 된다.
.content.active {
width: calc(100% - 60px);
left: 60px;
}
.side-navbar.active {
width: 60px;
}사이드바영역은 아이콘만 남게 60px으로 width를 설정하고
content영역은 흰바탕이 있는 부분인데 60px를 100%의 width에서 빼버린다.
그리고 hamburger 아이콘이 포함된 header 영역도 위치를 조정해주어야 하기 때문에 left: 60px을 준 것을 볼 수 있다.
