passport/rootfs/web/src/components/UserMenu.vue at 38665f50a00a48d8a4a9fcb6d9bf132a146d47eb · drycc/passport · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!--用户菜单-->
<template>
    <a
        class="glostick__menu-icon glostick__menu-icon--account"
        @click="openOrCloseMenu"
    >
        <div class="glostick__user__avatar--container">
            <img
                class="glostick__user__avatar"
                :src="'/user/avatar/' + user.username"
                id="menu-account"
            />
        </div>
        <div class="glostick__user__notification"></div>
    </a>
    <ul
        id="glostick__menu--account"
        class="glostick__menu glostick__menu--account"
        :class="{ 'glostick__menu--open': isMenuActived }"
    >
        <li class="glostick__menu__listitem">
            <a
                class="glostick__menu__item glostick__menu__item--account-details"
                href="/account-setting"
            >
                <div class="glostick__user__avatar--container">
                    <img
                        class="glostick__account-details__avatar"
                        :src="'/user/avatar/' + user.username"
                    />
                </div>
                <div
                    v-if="user.first_name || user.last_name"
                    class="glostick__account-details__name"
                >
                    {{ user.first_name }} {{ user.last_name }}
                </div>
                <div v-else class="glostick__account-details__name">
                    {{ user.username }}
                </div>
                <div class="glostick__account-details__email">
                    {{ user.email }}
                </div>
            </a>
        </li>
        <li class="glostick__menu__listitem">
            <a
                class="glostick__menu__item glostick__menu__item--settings"
                href="/account-setting"
                >Account settings</a
            >
        </li>

        <li class="glostick__menu__listitem">
            <a
                class="glostick__menu__item glostick__menu__item--docs"
                @click="logout"
                >Sign out</a
            >
        </li>
    </ul>
</template>

<script>
import UserMenu from "./UserMenu";
export default UserMenu;
</script>

<style scoped>
.glostick__menu--account {
    top: 42px;
}
</style>