willaengine/resources/js/Global/components/Drawer/Notifications.vue

<template>
    <div class="text-xs-center">
        <v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-x>
            <template v-slot:activator="{ on }">
                <v-icon dark v-on="on"> fas fa-bell </v-icon>
            </template>
            <v-card>
                <v-list>
                    <v-list-tile avatar>
                        <v-list-tile-avatar>
                        <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
                        </v-list-tile-avatar>

                        <v-list-tile-content>
                        <v-list-tile-title> فریدالدین ساروی </v-list-tile-title>
                        <v-list-tile-sub-title> ملقب به مواسکاجی شلوار مکعبی </v-list-tile-sub-title>
                        </v-list-tile-content>

                        <v-list-tile-action>
                        <v-btn :class="fav ? 'red--text' : ''" icon @click="fav = !fav">
                            <v-icon>fas fa-favorite</v-icon>
                        </v-btn>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list>

                <v-divider></v-divider>

                <v-list>
                    <v-list-tile>
                        <v-list-tile-action>
                        <v-switch v-model="message" color="cyan"></v-switch>
                        </v-list-tile-action>
                        <v-list-tile-title> نمایش پیام ها </v-list-tile-title>
                    </v-list-tile>

                    <v-list-tile>
                        <v-list-tile-action>
                        <v-switch v-model="hints" color="red"></v-switch>
                        </v-list-tile-action>
                        <v-list-tile-title> نمایش راهنما ها </v-list-tile-title>
                    </v-list-tile>
                </v-list>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="menu = false" slot="activator" fab color="red" dark><v-icon dark>fas fa-times</v-icon></v-btn>
                    <v-btn @click="menu = false" slot="activator" fab color="cyan" dark><v-icon dark>fas fa-check</v-icon></v-btn>

                </v-card-actions>
            </v-card>
        </v-menu>
    </div>
</template>
<script>
export default {
    props: {
        TitleFa : {default: ' عنوان بخش '},
        TitleEn : {default: ' Section Title '},
        icon : {default: null},
        hasDetail: {default: true}
    },
    data: () => ({
        fav: true,
        menu: false,
        message: false,
        hints: true
    })
}
</script>
<style scoped>

</style>