Header.vue 3.23 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">autoradio/</span><b>dashboard</b></router-link></span>
8
9
10
11
12
13
14
15
16
          </b-col>
          <b-col md="2" class="d-none d-sm-none d-md-block" align="right">
            <a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div>
      <b-container>
17
18
19
        <b-navbar toggleable="lg" type="dark" variant="dark">
          <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>
20
21
22
          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
          <b-collapse is-nav id="nav_collapse">
            <b-navbar-nav>
23
              <b-nav-item v-for="mod in modules" :key="mod.slug" :to="mod.slug">{{ mod.title }}</b-nav-item>
24
25
26
27
28
29
30
31
32
33
34
35
36
            </b-navbar-nav>
            <b-navbar-nav class="ml-auto">
              <b-nav-item-dropdown text="EN" right>
                <b-dropdown-item href="#">EN</b-dropdown-item>
                <b-dropdown-item href="#">DE</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 href="#">Settings</b-dropdown-item>
                <b-dropdown-item href="#">Profile</b-dropdown-item>
37
                <b-dropdown-item @click='$parent.signOut'>Signout</b-dropdown-item>
38
              </b-nav-item-dropdown>
39
              <b-nav-item v-if="! user.logged_in" to="home"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in"></b-nav-item>
40
41
42
43
44
45
46
47
48
49
              <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>
50
51
52
53
54
55
56
57
58
59
60
61
  </header>
</template>

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

62
<style scoped>
63
header > div:first-child {
64
  background: #ad7fa8; /* for browsers that don't support gradients */
65
  background: linear-gradient(#ad7fa8, #343a40); /* light magenta to bootstrap dark navbar */
66
  padding-bottom: 1em;
67
}
68
69
70
header > div:nth-child(2) {
  background-color: #343a40;
  margin-bottom: 2em;
71
72
73
74
75
76
77
78
79
}
.header-branding {
  height: 75px;
  line-height: 75px;
}
.header-title {
  font-size: 3em;
  vertical-align: middle;
}
80
81
82
.header-title a {
  text-decoration: none;
  color: #2e3436;
83
  text-shadow: #eee 0 0 10px;
84
}
85
86
87
88
.header-logo {
  width: 75px;
  height: 75px;
}
89
90
91
92
93
94
.help-image {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
}
95
96
97
.menu-context-info {
  color: rgba(255, 255, 255, 0.5);
}
98
99

</style>