Header.vue 2.94 KB
Newer Older
1
2
<template>
  <header>
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
    <div>
      <b-container>
        <b-row class="header-branding">
          <b-col md="10">
            <span class="header-title"><router-link to="home">autoradio/<b>dashboard</b></router-link></span>
          </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>
        <b-navbar toggleable="md" type="dark" variant="dark">
          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
          <b-collapse is-nav id="nav_collapse">
            <b-navbar-nav>
              <b-nav-item v-for="mod in modules" :to="mod.slug">{{ mod.title }}</b-nav-item>
            </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>
                <b-dropdown-item href="#">Signout</b-dropdown-item>
              </b-nav-item-dropdown>
              <b-nav-item v-if="! user.logged_in" href="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></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>
48
49
50
51
52
53
54
55
56
57
58
59
  </header>
</template>

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

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

</style>