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

<template>
    <v-layout wrap>
        <v-container class="Header" >
            <v-icon class="Menu" @click.stop="drawer = !drawer" dark>fas fa-bars</v-icon>
            <a href="/Main/Home">
                <v-icon class="Home" dark>fas fa-home</v-icon>
            </a>
            <div class="Time"><div class="En WM-Font-22"> 11:22 </div><div class="WM-Font-14">  سه شنبه 22 مهر 1398 </div></div>
            <div class="Notification" dark>
                <wm-notifications></wm-notifications>
            </div>

        </v-container>

        <v-navigation-drawer v-model="drawer" app temporary right>
            <v-list class="pa-1">
                <v-list-tile avatar>
                    <v-list-tile-avatar>
                        <img src="https://randomuser.me/api/portraits/men/85.jpg">
                    </v-list-tile-avatar>

                    <v-list-tile-content>
                        <v-list-tile-title class="Name"> {{ getAuthUser.name }} </v-list-tile-title>
                        <div class="Role"> مدیریت  </div>
                        <a  class="LogOut">
                            <v-tooltip bottom color="black">
                                <v-btn small @click.native.stop="logout" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-power-off</v-icon></v-btn>
                                <span> خروج از حساب کاربری </span>
                            </v-tooltip>
                        </a>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>

            <v-list class="pt-0" dense>
                <v-divider class="Divider"></v-divider>
                <a :href="item.href" v-for="(item, key) in Items" :key="key" >
                    <template v-if="$_hasPermission(item.permission)">
                        <wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn"></wm-list-tile>
                    </template>
                </a>
            </v-list>
        </v-navigation-drawer>
    </v-layout>
</template>

<script>
    import Tile from '@Global/components/Drawer/Tile';
    import Notifications from '@Global/components/Drawer/Notifications';
    import {mapActions, mapGetters} from 'vuex';
    export default {
        data() {
            return {
                fav: true,
                menu: true,
                message: false,
                hints: true,
                drawer: false,
                Items: [
                    { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'dashboard', permission: "", href: '/User/List' },
                    // { titleEn: ' My Messages ', titleFa: ' پیام های من ', icon: 'question_answer', permission: "", href: '/User/List' },
                    { titleEn: ' My Users ', titleFa: ' کاربران مجموعه ی من ', icon: 'question_answer', permission: "", href: '/User/List' }
                ],
                user: {name: ''}
            }
        },
        components: {
            'wm-list-tile': Tile,
            'wm-notifications':Notifications,
        },
        computed:{
            ...mapGetters('auth', ["getAuthUser"])
        },
        methods:{
            ...mapActions('auth', ['logout'])
        },
    }
</script>

<style lang="scss" scoped>
.Header .Menu {
    position: absolute;
    right: 20px;
    top: 20px;
}
.Header .Home {
    position: absolute;
    right: 50px;
    top: 20px;
}
.Notification {
    position: absolute;
    left: 20px;
    top: 20px;
}
.Divider {
    margin: 0px;
}
.Name {
    font-size: 18px;
}
.Role {
    font-size: 14px;
    color: #aaaaaa;
}
.Time {
    text-align: center;
    color: #fff;
    margin-top: -10px;
}
.Header {
    padding-bottom: 0px;
}
.LogOut {
    position:absolute;
    left:10px;
}
.drawer-trigger {
    position: fixed;
    top: 0px;
    padding: 40px;
    background-color: white;
    left: 400px;
}

.drawer-trigger.active {
    color: red;
}

.drawer {
    position: fixed;
    top: 0px;
    left: -400px;
    bottom: 0px;
    background-color: white;
    width: 400px;
}

.drawer.open {
    left: 0px;
}
</style>