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

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

28
      <Togglebar v-if="config.headers.toggle"
29
30
31
        class="
          col
          col-md-auto
32
33
34
          col-xs-12
          column-xs
          content-sm-center
35
          justify-sm-evenly
36
37
          row-sm
          "
38
39
        :status="status"
      />
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    </div>
  </q-header>
</template>

<script>
import Infobar from '@/components/infobar.vue';
import Navbar from '@/components/navbar.vue';
import Togglebar from '@/components/togglebar.vue';

export default {
  name: 'Header',
  components: {
    Infobar,
    Navbar,
    Togglebar,
  },
  props: {
57
    collectiontitle: String,
58
    config: Object,
59
60
    itemurls: Array,
    manifests: Array,
61
    pagelabel: String,
62
63
64
65
    status: Object,
  },
};
</script>
66
67

<style scoped>
68
.bar {
69
  max-width: 1200px;
70
71
  margin-left: auto;
  margin-right: auto;
72
73
}
</style>