Vuetifyを使った開発 3 ~ナビゲーションとAppバーのカスタマイズ~

// 「v-bind:width」もしくは省略形で「:width」用いて指定する
<v-navigation-drawer :width="180" color="secondary" permanent>
</v-navigation-drawer>

// Appバーコンポーネント

<script setup lang="ts">
import { ref } from 'vue';

const isOpen = ref(true)
defineEmits<{
    (e: 'drawer-change', isOpen: boolean): void
}>()

const changeDrawer = () => {
    isOpen.value = !isOpen.value
    return isOpen.value
}
</script>

<template>
    <v-app-bar color="primary" density="compact">
        <template v-slot:prepend>
            <v-app-bar-nav-icon @click="$emit('drawer-change', changeDrawer())"></v-app-bar-nav-icon>
        </template>
        <v-app-bar-title>App bar</v-app-bar-title>
        <template v-slot:append>
            <v-btn icon="mdi-dots-vertical"></v-btn>
        </template>
    </v-app-bar>
</template>

// 親コンポーネント

<script setup lang="ts">
import { ref } from 'vue';

const isOpen = ref(true)
const updateDrawerStatus = (status: boolean) => {
  isOpen.value = status
}
</script>

<template>
  <v-app>
    <MyBar @drawer-change="updateDrawerStatus" />
    <MyNavigation :drawer="isOpen" />
    <v-main>
      {{ isOpen }}
    </v-main>
  </v-app>
</template>

// ナビゲーションコンポーネント

<script setup lang="ts">
const props = defineProps({
    drawer: Boolean
})
</script>

<template>
    <v-navigation-drawer :width="180" v-model="props.drawer" color="secondary" permanent>
        <v-list-item title="Navigation" subtitle="title">{{ props.drawer }}</v-list-item>
        <v-divider></v-divider>
        <v-list-item link title="Home"></v-list-item>
        <v-list-item link title="Test"></v-list-item>
    </v-navigation-drawer>
</template>

// ナビゲーションコンポーネント

<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
    drawer: Boolean
})

const rail = ref(false)
</script>

<template>
    <v-navigation-drawer :width="180" v-model="props.drawer" color="secondary" 
        :rail="rail" @click.stop="rail = !rail" permanent>
        <v-list-item title="Navigation" subtitle="title"></v-list-item>
        <v-divider></v-divider>
        <v-list-item prepend-icon="mdi-home" link title="Home"></v-list-item>
        <v-list-item prepend-icon="mdi-cog" link title="Test"></v-list-item>
    </v-navigation-drawer>
</template>

<!-- ナビゲーションコンポーネント -->
    
  <v-navigation-drawer :width="200" v-model="props.drawer" color="secondary" permanent>
        <v-list-item title="Navigation"></v-list-item>
        <v-divider></v-divider>
        <v-list open-strategy="multiple">
            <v-list-group value="グループ1">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" title="グループ1"></v-list-item>
                </template>
                <v-list-item prepend-icon="mdi-home" link title="Home"></v-list-item>
            </v-list-group>

            <v-list-group value="グループ2">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" title="グループ2"></v-list-item>
                </template>
                <v-list-item prepend-icon="mdi-cog" link title="Test"></v-list-item>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>