header.vue 1.63 KB
Newer Older
1
<template>
nwindis's avatar
nwindis committed
2
3
4
5
  <q-header
    elevated
    :class="$q.dark.isActive ? 'bg-black text-white' : 'bg-white text-black'"
    >
Nils Windisch's avatar
Nils Windisch committed
6
    <div class="bar row justify-between items-center">
7
      <Infobar v-if="config.headers.info && manifests.length"
Nils Windisch's avatar
Nils Windisch committed
8
        class="col-xs-12 q-pl-md"
9
        :collectiontitle="collectiontitle"
10
        :itemlabel="itemlabel"
11
12
        :manifests="manifests"
      />
13
    </div>
14

15
    <div class="bar row q-px-md justify-sm-between">
16
      <Navbar v-if="config.headers.navigation"
17
18
        class="
          col
19
          col-md-4
20
21
22
23
          col-xs-12
          column-xs
          justify-md-start
          justify-xs-center
24
          row-sm"
25
        :itemurls="itemurls"
26
        :labels="config.labels"
27
28
        :manifests="manifests"
      />
29

30
      <ToggleIndex v-if="config.headers.toggle"
31
32
33
        class="
          col
          col-md-auto
34
35
36
          col-xs-12
          column-xs
          content-sm-center
37
          justify-sm-evenly
38
          row-sm"
39
        :panels="panels"
40
      />
41
42
43
44
45
46
47
    </div>
  </q-header>
</template>

<script>
import Infobar from '@/components/infobar.vue';
import Navbar from '@/components/navbar.vue';
48
import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
49
50
51
52
53
54

export default {
  name: 'Header',
  components: {
    Infobar,
    Navbar,
55
    ToggleIndex,
56
57
  },
  props: {
58
    collectiontitle: String,
59
    config: Object,
60
    imageurl: String,
61
    itemlabel: String,
62
63
    itemurls: Array,
    manifests: Array,
64
    panels: Array,
65
66
67
  },
};
</script>
68

nwindis's avatar
nwindis committed
69
<style lang="scss" scoped>
nwindis's avatar
nwindis committed
70
71
72
73
74
header {
  left: 0;
  position: absolute;
  top: 0;
}
nwindis's avatar
nwindis committed
75

nwindis's avatar
nwindis committed
76
77
78
79
80
.bar {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
81
</style>