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>