11. Vue와 Firebase로 나만의 사이트 만들기 - navigation drawer 만들기

 

 

 

VF - 11강

 

 

 

---

• 이번 강에서는 메뉴라고 할 수 있는 navigation drawer를 만들어 볼 것이다.
• 크게 어렵지 않으며, App bar의 석 삼자(三)를 누르면 나오는 창이 나오고 들어가는 것을 구현할 것이다.
• <v-navigation-drawer> 태그는 일반적으로 보는 메뉴는 아니며, 빈 박스만 가지고 있다고 생각하면 된다.
• 그리고 v-model 속성으로 나오고 안나오게 해 줄 것이다.
• 일단 공식사이트에서 아래와 같이 빈 틀을 복사하여 </app-bar> 태그 바로 밑에 추가한다.

<!-- App.vue -->
<v-navigation-drawer permanent>

</v-navigation-drawer>

• 여기서 permanent는 영구적인, 지속적인 이라는 뜻이며, 공식 사이트 Example에서 표시하려고 하다 보니 계속 나와있어야 하여 이 속성이 사용되었다.
• 이제 평소에는 안보이다가 클릭했을 때만 보이는 것이 필요하다.
• 그래서 permanent 속성을 삭제하고, v-model="drawer"을 추가한다.
• 변수명(drawer)은 항상 제일 단순한 이름으로 만들어 주는 것이 좋다.

<!-- App.vue -->
<v-navigation-drawer v-model="drawer">

</v-navigation-drawer>

• 나오고 안나오고를 할 수 있는 제어 변수를 보관할 곳을 data( ) { }에 아래와 같이 넣어준다.

<script>
export default {
  name: 'App',
  data () {
    return {
      drawer: false
    }
  }
}
</script>

• 여기서 false는 아직 보여지지 않는 것을 뜻하며 true가 되면 보여야 한다.
• 석 삼자(三) - <v-app-bar-nav-icon> 태그를 누르면 drawer가 켜지도록 해야 하기 때문에 클릭이벤트를 아래와 같이 넣어준다.

<!-- App.vue -->
<v-app-bar-nav-icon v-on:click="drawer = !drawer"></v-app-bar-nav-icon>
<!-- <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon> 약식 -->

• 위 코드는 토글을 간단하게 만든 것이다.
• 결과 화면에서 버튼을 누르면 배경이 약하게 어두워 진것을 확인할 수 있다.

• 아직은 내용이 없기 때문에 공식사이트에서 복사한 <v-list-item>를 <v-navigation-drawer> 태그 안에 아래와 같이 넣어준다.

<!-- App.vue -->
<v-navigation-drawer v-model="drawer">
  <v-list-item>
    <v-list-item-content>
      <v-list-item-title class="text-h6">
        Application
      </v-list-item-title>
      <v-list-item-subtitle>
        subtext
      </v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
  <v-divider></v-divider>
</v-navigation-drawer>

• 결과 화면을 보면 아직 자리를 못 잡기 때문에 <v-navigation-drawer> 태그 안에 app 속성을 명시를 해준다.

<!-- App.vue -->
<v-navigation-drawer app v-model="drawer">

• 그리고 결과 화면은 아래와 같다.

 

• 이로써 간단하게 navigation drawer에 대해서 알아보았다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405532452
  • https://www.youtube.com/watch?v=wzYuEzyAcco 

11 navigation drawer 만들기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---