[React] Navigation Bar (2) - 2중 Navigation 바

✔ 그룹을 클릭하면, 클릭된 그룹 안의의 채널들 제시

(+ 채널이 너무 많으면, 스크롤바 제공)

 

// Contents.js

onClickGroup = (e) => {
    // state에 선택한 그룹의 채널들 넣기
    var v = e.target.innerText
    this.setState({
      "ChkChannel": this.state.Channel[v]
    })

    // 버튼 취소
    if (document.querySelector(".group-chk")) {
      document.querySelector(".group-chk").classList.remove("group-chk")
    }
    // 버튼 체크
    e.target.classList.add("group-chk")

    // 채널 nav바 보이기
    document.querySelector(".nav-down").classList.add("nav-none")
    document.querySelector(".sub-nav").classList.remove("nav-none")
}

/* Contents.css */

.group-chk {
  background-color: #fff;
  color: #0E4289;
  opacity: 0.9;
}

.nav-none {
  display: none;
}

그룹1을 클릭하면, 그룹1에 해당하는 채널들 제시

그룹2를 클릭하면, 그룹2에 해당하는 채널들 제시

보안상 문제가 있을까봐, 몇 개의 채널은 가렸습니당😥

세상에서 제일가는 쫄보,,

 

 

✔ 화살표를 클릭하면, 채널 Navigation바 숨김 & 보임

// Content.js

onClickNavArrow = (e) => {    
    if (e.target.className === "nav-down") {
      document.querySelector(".nav-down").classList.add("nav-none")
      document.querySelector(".sub-nav").classList.remove("nav-none")
    }
    if (e.target.className === "nav-up") {      
      document.querySelector(".sub-nav").classList.add("nav-none")
      document.querySelector(".nav-down").classList.remove("nav-none")
    } 
}

// Content.js => render

<div className="c-nav">
    ...
    <div className="nav-down nav-none" onClick={this.onClickNavArrow}>
        ▼
    </div>
</div>
<div className="sub-nav nav-none">
    ...
    <div className="nav-up" onClick={this.onClickNavArrow}>
        ▲
    </div>
</div>

채널들 숨긴 화면