passport/rootfs/web/src/components/MainNav.vue at 7fedd91c9b9cc9bb25d62686e6a2e5b90d2d0852 · 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
74
75
76
77
78
79
80
81
82
<template>
    <nav class="ui-subnav">
        <div class="ui-subnav__inner">
            <button @click="goToAccessToken" class="ui-subnav__item" :class="{'is-active': isAccessTokenActive}" type="button">
                <span>Access Tokens</span>
            </button>
            <button @click="goToAccountSetting" class="ui-subnav__item" :class="{'is-active': isAccountSettingActive}" type="button">
                <span>Account Setting</span>
            </button>
        </div>
    </nav>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
    props: {
        isAccessTokenActive: {
            type: Boolean,
            default: false
        },
        isAccountSettingActive: {
            type: Boolean,
            default: false
        },
    },
    setup(props) {
        const router = useRouter()

        const goToAccessToken = () => {
            router.push('/access-tokens')
        }

        const goToAccountSetting = () => {
            router.push('/account-setting')
        }

        return {
            goToAccessToken,
            goToAccountSetting
        }
    }
}
</script>

<style scoped>
.ui-subnav {
    padding: 14px 16px 8px;
    border-bottom: 1px solid rgba(217, 226, 239, 0.75);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
}

.ui-subnav__inner {
    display: flex;
    gap: 8px;
    padding: 0;
    flex-wrap: wrap;
}

.ui-subnav__item {
    border: none;
    background: #edf2fa;
    color: var(--ui-color-text-secondary);
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: var(--ui-font-weight-semibold);
    transition: all 0.18s ease;
}

.ui-subnav__item:hover {
    color: var(--ui-color-primary-hover);
    background: var(--ui-color-primary-soft);
}

.ui-subnav__item.is-active {
    color: #fff;
    background: var(--ui-color-primary);
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.34);
}
</style>