Header.vue 4.35 KB
Newer Older
1
2
<template>
  <header>
3
4
5
6
    <div>
      <b-container>
        <b-row class="header-branding">
          <b-col md="10">
7
            <span class="header-title"><router-link to="home"><span class="d-none d-sm-inline">AURA/</span><b>dashboard</b></router-link></span>
8
          </b-col>
9
10
11
12
13
          <b-col
            md="2"
            class="d-none d-sm-none d-md-block"
            align="right"
          >
14
15
16
            <router-link to="home">
              <img
                class="header-logo"
17
                src="/assets/aura-dashboard-200-nobackground.png"
18
19
              >
            </router-link>
20
21
22
23
24
25
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div>
      <b-container>
26
27
28
29
30
        <b-navbar
          toggleable="lg"
          type="dark"
          variant="dark"
        >
31
32
          <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>
33
34
35
36
37
          <b-navbar-toggle target="nav_collapse" />
          <b-collapse
            id="nav_collapse"
            is-nav
          >
38
            <b-navbar-nav>
39
40
41
              <b-nav-item
                v-for="mod in modules"
                :key="mod.slug"
42
                :active="mod.slug === $route.name"
43
                :to="'/' + mod.slug"
44
45
46
              >
                {{ mod.title }}
              </b-nav-item>
47
48
            </b-navbar-nav>
            <b-navbar-nav class="ml-auto">
49
50
51
52
              <b-nav-item>
                {{ $t('helloWorld') }}
              </b-nav-item>

53
              <b-nav-item-dropdown
54
                :text="$activeLocale.toUpperCase()"
55
56
                right
              >
57
                <b-dropdown-item :active="$activeLocale === 'de'" @click="$locale('de')">
58
59
                  DE
                </b-dropdown-item>
60
61
62
63

                <b-dropdown-item :active="$activeLocale === 'en'" @click="$locale('en')">
                  EN
                </b-dropdown-item>
64
              </b-nav-item-dropdown>
65
66
67
68
              <b-nav-item-dropdown
                v-if="user.logged_in"
                right
              >
69
70
71
72
                <!-- Using button-content slot -->
                <template slot="button-content">
                  <em>{{ user.name }}</em>
                </template>
73
                <b-dropdown-item to="settings">
74
75
76
77
78
79
80
81
                  Settings
                </b-dropdown-item>
                <b-dropdown-item href="#">
                  Profile
                </b-dropdown-item>
                <b-dropdown-item @click="$parent.signOut">
                  Signout
                </b-dropdown-item>
82
              </b-nav-item-dropdown>
83
84
85
86
87
              <b-nav-item
                v-if="! user.logged_in"
                to="home"
              >
                <img
88
                  src="/assets/16x16/system-users.png"
89
90
91
92
                  alt="log-in symbol"
                  title="Log in"
                >
              </b-nav-item>
93
94
              <div class="help-image-container">
                <b-nav-item>
95
96
97
                  <router-link to="help">
                    <img
                      class="help-image"
98
                      src="/assets/help-browser-32x32.png"
99
100
101
102
                      alt="Help symbol"
                      title="Go to help pages"
                    >
                  </router-link>
103
104
105
106
107
108
109
                </b-nav-item>
              </div>
            </b-navbar-nav>
          </b-collapse>
        </b-navbar>
      </b-container>
    </div>
110
111
112
113
114
115
116
117
118
119
120
121
  </header>
</template>

<script>
export default {
  props: {
    modules: { type: Array, required: true },
    user: { type: Object, required: true }
  }
}
</script>

122
<style scoped>
123
header > div:first-child {
124
125
  background: #343a40; /* for browsers that don't support gradients */
  background: linear-gradient(#000, #343a40); /* dashboard black to bootstrap dark navbar */
126
  padding-bottom: 1em;
127
}
128
129
130
header > div:nth-child(2) {
  background-color: #343a40;
  margin-bottom: 2em;
131
132
133
134
135
136
137
138
139
}
.header-branding {
  height: 75px;
  line-height: 75px;
}
.header-title {
  font-size: 3em;
  vertical-align: middle;
}
140
141
.header-title a {
  text-decoration: none;
142
143
  color: #c09;
  text-shadow: #fff 0 0 2px;
144
}
145
146
147
.header-logo {
  width: 75px;
  height: 75px;
148
  margin-top: 10px;
149
}
150
151
152
153
154
155
.help-image {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
}
156
157
158
.menu-context-info {
  color: rgba(255, 255, 255, 0.5);
}
159
160

</style>