<template>
 <v-row dense>
 <v-col v-for="(variant, i) in variants" :key="i" cols="12" md="4">
 <div>{{ variant }}</div>
 <v-icon-btn :variant="variant" color="primary" icon="$vuetify" />
 </v-col>
 </v-row>
 <v-row dense>
 <v-col>
 <v-toolbar class="px-3 mx-auto" rounded="pill" title="Toolbar">
 <template #append>
 <v-icon-btn :active="menu" active-color="surface-variant" icon="mdi-dots-vertical">
 <v-icon />
 <v-menu v-model="menu" activator="parent" location="bottom end" offset="4">
 <v-list
 bg-color="surface-light"
 class="d-flex flex-column ga-1 pa-1"
 density="compact"
 rounded="lg"
 variant="text"
 slim
 >
 <v-list-item
 prepend-icon="mdi-account-circle-outline"
 rounded="lg"
 title="Account"
 link
 />
 <v-list-item
 prepend-icon="mdi-cog-outline"
 rounded="lg"
 title="Settings"
 link
 />
 <v-list-item
 prepend-icon="mdi-logout-variant"
 rounded="lg"
 title="Logout"
 link
 />
 </v-list>
 </v-menu>
 </v-icon-btn>
 </template>
 </v-toolbar>
 </v-col>
 </v-row>
 <v-row>
 <v-col>
 <v-container class="pa-md-12 text-center">
 <v-sheet
 class="d-inline-flex ga-1 pa-4 align-center justify-center mx-auto"
 color="surface-light"
 rounded="pill"
 >
 <v-sheet
 :rounded="!mic ? 'lg' : 'xl'"
 class="overflow-visible d-flex align-center"
 color="surface"
 height="48"
 width="88"
 flat
 >
 <v-icon-btn
 v-model:active="micOptions"
 :active-variant="!mic ? 'flat' : 'text'"
 :base-variant="!mic ? 'flat' : 'text'"
 :color="!mic ? 'error' : ''"
 :rotate="micOptions ? 180 : 0"
 :rounded="!mic ? 'lg' : 'circle'"
 icon="mdi-chevron-up"
 size="48"
 hide-overlay
 />
 <v-icon-btn
 v-model:active="mic"
 :rounded="!mic ? 'lg' : 'circle'"
 active-color=""
 active-icon="mdi-microphone"
 active-variant="tonal"
 base-variant="flat"
 class="ms-n2"
 color="#f9dedc"
 icon="mdi-microphone-off"
 size="48"
 v-ripple
 />
 </v-sheet>
 <v-sheet
 :rounded="!video ? 'lg' : 'xl'"
 class="overflow-visible d-flex align-center"
 color="surface"
 height="48"
 width="88"
 flat
 >
 <v-icon-btn
 v-model:active="videoOptions"
 :active-variant="!video ? 'flat' : 'text'"
 :base-variant="!video ? 'flat' : 'text'"
 :color="!video ? 'error' : ''"
 :rotate="videoOptions ? 180 : 0"
 :rounded="!video ? 'lg' : 'circle'"
 icon="mdi-chevron-up"
 size="48"
 hide-overlay
 />
 <v-icon-btn
 v-model:active="video"
 :rounded="!video ? 'lg' : 'circle'"
 active-color=""
 active-icon="mdi-video-outline"
 active-variant="tonal"
 base-variant="flat"
 class="ms-n2"
 color="#f9dedc"
 icon="mdi-video-off"
 size="48"
 />
 </v-sheet>
 <v-icon-btn
 v-model:active="caption"
 :class="!caption ? 'mx-1' : undefined"
 :rounded="!caption ? 'circle' : 'lg'"
 :width="caption ? 56 : 48"
 active-color="#9bbbef"
 active-icon="mdi-closed-caption"
 active-variant="flat"
 height="48"
 icon="mdi-closed-caption-outline"
 />
 <v-icon-btn
 v-model:active="emoji"
 :class="!emoji ? 'mx-1' : undefined"
 :rounded="!emoji ? 'circle' : 'lg'"
 :width="emoji ? 56 : 48"
 active-color="#9bbbef"
 active-icon="mdi-emoticon"
 height="48"
 icon="mdi-emoticon-outline"
 />
 <v-icon-btn
 v-model:active="share"
 :class="!share ? 'mx-1' : undefined"
 :rounded="!share ? 'circle' : 'lg'"
 :width="share ? 56 : 48"
 active-color="#9bbbef"
 active-icon="mdi-arrow-up-bold-box"
 height="48"
 icon="mdi-arrow-up-bold-box-outline"
 @click="onClick"
 />
 <v-icon-btn
 v-model:active="raised"
 :class="!raised ? 'mx-1' : undefined"
 :rounded="!raised ? 'circle' : 'lg'"
 :width="raised ? 56 : 48"
 active-color="#9bbbef"
 active-icon="mdi-hand-back-right"
 height="48"
 icon="mdi-hand-back-right-outline"
 />
 <v-icon-btn
 height="48"
 icon="mdi-dots-vertical"
 rounded="xl"
 variant="tonal"
 >
 <v-icon />
 <v-menu activator="parent" location="top end" offset="4">
 <v-list rounded="lg" slim>
 <v-list-item
 prepend-icon="mdi-radiobox-marked"
 title="Manage recording"
 link
 />
 <v-divider class="my-2" />
 <v-list-item
 prepend-icon="mdi-view-grid-outline"
 title="Change layout"
 link
 />
 <v-list-item
 prepend-icon="mdi-fullscreen"
 title="Full screen"
 link
 />
 <v-list-item
 prepend-icon="mdi-share-variant-outline"
 title="Share screen"
 link
 />
 <v-divider class="my-2" />
 <v-list-item
 prepend-icon="mdi-cog-outline"
 title="Settings"
 link
 />
 </v-list>
 </v-menu>
 </v-icon-btn>
 <v-icon-btn
 v-model:active="hangup"
 active-variant="outlined" 
 base-variant="flat"
 color="error"
 height="48"
 icon="mdi-phone-hangup-outline"
 rounded="xl"
 width="72"
 />
 </v-sheet>
 </v-container>
 </v-col>
 </v-row>
</template>
<script>
 export default {
 data: () => ({
 variants: ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'],
 menu: false,
 caption: false,
 emoji: false,
 raised: false,
 share: false,
 mic: true,
 micOptions: false,
 video: true,
 videoOptions: false,
 }),
 }
</script>