소개

웹 애플리케이션을 만들고 있다면 모바일 장치에서만 NavigationBar 버튼을 표시하고 싶다는 것이 자주 있으므로 방법을 소개한다.

또한 전제로서 UI 프레임워크는 Vuetify를 사용하고 있다고 한다.

제어에는 Breakpoint를 사용합니다.

공식 에서 소개하고 있는 Breakpoint를 사용하는 것이 좋다.
$vuetify.breakpoint라는 변수는 현재 화면 크기와 관련된 상태를 유지합니다.



많은 파라미터가 있으므로 어느 것을 사용해도 좋지만, 예를 들면 xs 를 이용해 제어를 실시하면 이런 조건이 된다.

v-show="$vuetify.breakpoint.xs"

실제 소스에서 이런 느낌

<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :clipped-left="clipped" fixed app>
      <v-app-bar-nav-icon
        @click.stop="drawer = !drawer"
        v-show="$vuetify.breakpoint.xs"      <-------ここに一行追加
      />
      <v-spacer />
    </v-app-bar>
    <v-main>
      <v-container fluid>
        <nuxt />
      </v-container>
    </v-main>
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

이것으로 맑고 모바일 장치로 표시하고 있을 때만 메뉴 바 버튼이 표시되게 된다.