Header.vue 5.06 KB
Newer Older
1
<template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <header class="tw-bg-gray-800">
        <div>
            <b-container>
                <b-navbar
                        toggleable="lg"
                        type="dark"
                        class="tw-text-white tw-flex"
                >
                    <span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
                    <span class="d-sm-none menu-context-info">Hit menu button for more:</span>
                    <b-navbar-toggle target="nav_collapse"/>
                    <b-collapse
                            id="nav_collapse"
                            is-nav
                            class="tw-flex tw-items-center tw-justify-between"
                    >
                        <b-navbar-nav class="tw-flex tw-items-center">
                            <b-nav-item to="/home">
                                <img
                                        class="header-logo tw-h-12"
                                        src="/assets/aura-dashboard-200-nobackground.png"
                                >
                            </b-nav-item>
25

26
27
28
29
30
31
32
33
34
                            <b-nav-item
                                    v-for="mod in modules.main"
                                    :key="mod.slug"
                                    :active="mod.slug === $route.name"
                                    :to="'/' + mod.slug"
                            >
                                {{ mod.title }}
                            </b-nav-item>
                        </b-navbar-nav>
35

36
37
38
39
40
41
42
43
                        <b-navbar-nav class="tw-flex tw-items-center">
                            <b-nav-item-dropdown
                                    :text="$activeLocale().toUpperCase()"
                                    right
                            >
                                <b-dropdown-item :active="$activeLocale() === 'de'" @click="$locale('de')">
                                    DE
                                </b-dropdown-item>
44

45
46
47
48
49
50
51
52
53
54
55
56
57
                                <b-dropdown-item :active="$activeLocale() === 'en'" @click="$locale('en')">
                                    EN
                                </b-dropdown-item>
                            </b-nav-item-dropdown>
                            <b-nav-item-dropdown
                                    v-if="user.logged_in"
                                    right
                            >
                                <!-- Using button-content slot -->
                                <template slot="button-content">
                                    <em>{{ user.name }}</em>
                                </template>
                                <b-dropdown-item to="settings">
58
                                    {{ $t('navigation.settings') }}
59
60
                                </b-dropdown-item>
                                <b-dropdown-item href="#">
61
                                    {{ $t('navigation.profile') }}
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
                                </b-dropdown-item>
                                <b-dropdown-item @click="$parent.signOut">
                                    {{ $t('auth.signOut') }}
                                </b-dropdown-item>
                            </b-nav-item-dropdown>
                            <b-nav-item
                                    v-if="! user.logged_in"
                                    to="home"
                            >
                                <img
                                        src="/assets/16x16/system-users.png"
                                        alt="log-in symbol"
                                        :title="$t('auth.signIn')"
                                >
                            </b-nav-item>
                            <div class="help-image-container">
                                <b-nav-item>
                                    <router-link to="help">
                                        <img
                                                class="help-image"
                                                src="/assets/help-browser-32x32.png"
                                                alt="Help symbol"
                                                title="Go to help pages"
                                        >
                                    </router-link>
                                </b-nav-item>
                            </div>
                        </b-navbar-nav>
                    </b-collapse>
                </b-navbar>
            </b-container>
        </div>
    </header>
95
96
97
</template>

<script>
98
99
    export default {
        props: {
100
            modules: {type: Object, required: true},
101
102
103
            user: {type: Object, required: true}
        },
    }
104
105
</script>

106
<style scoped>
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
    .header-title a {
        text-decoration: none;
        color: #c09;
        text-shadow: #fff 0 0 2px;
    }

    .help-image {
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
    }

    .menu-context-info {
        color: rgba(255, 255, 255, 0.5);
    }
123
124

</style>