header.vue 2.68 KB
Newer Older
1
<template>
2
3
  <q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
    <div class="header__wrap">
4
      <q-toolbar v-if="config.headers.info">
5
6
        <Infobar
          v-if="config.headers.info && manifests.length"
nwindis's avatar
nwindis committed
7
          class="col-xs-9"
8
9
10
11
          :collectiontitle="collectiontitle"
          :item="item"
          :manifests="manifests"
        />
nwindis's avatar
nwindis committed
12
        <div class="row no-wrap justify-end col-xs-3">
13
          <!-- TODO: make component out of the following and re-use it to avoid duplication -->
14
15
16
17
          <Language
            v-if="standalone"
            :config="config"
          />
nwindis's avatar
nwindis committed
18
19
20
          <Color :projectcolors="projectcolors" />
          <Softwareinfo />
        </div>
21
      </q-toolbar>
22

23
24
25
26
27
28
29
30
      <div>
        <q-toolbar class="q-pb-sm">
          <Navbar
            v-if="config.headers.navigation"
            :itemurls="itemurls"
            :labels="config.labels"
            :manifests="manifests"
          />
31

32
          <q-space />
33

nwindis's avatar
nwindis committed
34
          <TogglePanels
35
36
37
            v-if="config.headers.toggle"
            :panels="panels"
          />
38
39
40
41
42
43
44
45
46
47
48
49
50

          <div
            v-if="!config.headers.info"
            class="row no-wrap justify-end col-xs-3"
          >
            <!-- TODO: make component out of the following and re-use it to avoid duplication -->
            <Language
              v-if="standalone"
              :config="config"
            />
            <Color :projectcolors="projectcolors" />
            <Softwareinfo />
          </div>
51
52
53
        </q-toolbar>
      </div>
    </div>
54
  </q-header>
55
56
57
</template>

<script>
58
import Color from '@/components/color.vue';
59
import Infobar from '@/components/infobar.vue';
60
import Language from '@/components/language.vue';
61
import Navbar from '@/components/navbar.vue';
62
import Softwareinfo from '@/components/softwareinfo.vue';
nwindis's avatar
nwindis committed
63
import TogglePanels from '@/components/togglebar/togglePanels.vue';
64
65
66
67

export default {
  name: 'Header',
  components: {
68
    Color,
69
    Infobar,
70
    Language,
71
    Navbar,
72
    Softwareinfo,
nwindis's avatar
nwindis committed
73
    TogglePanels,
74
75
  },
  props: {
schneider210's avatar
schneider210 committed
76
77
78
79
80
81
82
83
84
85
86
87
    collectiontitle: {
      type: String,
      default: () => '',
    },
    config: {
      type: Object,
      default: () => {},
    },
    imageurl: {
      type: String,
      default: () => '',
    },
88
89
90
    item: {
      type: Object,
      default: () => {},
schneider210's avatar
schneider210 committed
91
92
93
94
95
96
97
98
99
100
101
102
103
    },
    itemurls: {
      type: Array,
      default: () => [],
    },
    manifests: {
      type: Array,
      default: () => [],
    },
    panels: {
      type: Array,
      default: () => [],
    },
104
105
106
107
108
    projectcolors: {
      type: Object,
      default: () => {},
    },
    standalone: Boolean,
109
110
111
  },
};
</script>
112

nwindis's avatar
nwindis committed
113
<style lang="scss" scoped>
114
115
.header__wrap {
  margin: 0 auto;
nwindis's avatar
nwindis committed
116
117
  max-width: 1200px;
}
118
</style>