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"> علیرضا حسنی </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="/User/List">
                    <wm-list-tile TitleFa=" حساب کاربری من " TitleEn="My Profile"></wm-list-tile>
                </a>
                <a href="/User/List">
                    <wm-list-tile TitleFa=" کاربران مجموعه ی من " TitleEn=" My Users "></wm-list-tile>
                </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} from 'vuex';

    export default {
        data() {
            return {
                fav: true,
                menu: true,
                message: false,
                hints: true,
                drawer: false,
                Items: [
                    { TitleEn: 'My Profile', TitleFa: ' حساب کاربری من ', Icon: 'dashboard' },
                    { TitleEn: ' My Messages ', TitleFa: ' پیام های من ', Icon: 'question_answer' },
                    { TitleEn: ' My Users ', TitleFa: ' کاربران مجموعه ی من ', Icon: 'question_answer' }
                ]
            }
        },
        components: {
            'wm-list-tile': Tile,
            'wm-notifications':Notifications,
        },
        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>