breadcrumbnavigation.vue 2.24 KB
Newer Older
nwindis's avatar
nwindis committed
1
2
<template>
  <div
3
    class="q-py-xs"
nwindis's avatar
nwindis committed
4
5
  >
    <div class="content">
6
      <q-breadcrumbs
7
        :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
8
9
        class="text-weight-medium"
      >
10
        <template #separator>
11
12
          <q-icon
            :name="fasChevronRight"
13
            size="1em"
14
15
          />
        </template>
nwindis's avatar
nwindis committed
16
        <q-breadcrumbs-el
17
          :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
18
19
        >
          <a
20
            :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
21
            :href="redirectUrl"
22
23
            class="header-links"
          >
24
25
26
            <q-icon
              :name="fasHome"
            />
27
            {{ $t(`${config.breadcrumbNavigation.title_homepage_key}`) }}
28
29
30
          </a>
        </q-breadcrumbs-el>

31
32
33
34
35
36
        <q-breadcrumbs-el
          v-if="!!searchTerm"
          :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
        >
          <a
            :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
dindigala's avatar
dindigala committed
37
            :href="`${redirectUrl}search.html?searchTerm=${searchTerm}`"
38
39
40
41
42
43
44
45
46
            class="header-links"
          >
            <q-icon
              :name="fasSearch"
            />
            {{ searchTerm }}
          </a>
        </q-breadcrumbs-el>

nwindis's avatar
nwindis committed
47
48
        <q-breadcrumbs-el
          :icon="fasFileAlt"
49
          :label="$t(`${config.breadcrumbNavigation.title_viewer_key}`)"
nwindis's avatar
nwindis committed
50
51
52
53
54
55
56
57
58
59
        />
      </q-breadcrumbs>
    </div>
  </div>
</template>

<script>
import {
  fasHome,
  fasFileAlt,
60
  fasChevronRight,
61
  fasSearch,
nwindis's avatar
nwindis committed
62
63
64
} from '@quasar/extras/fontawesome-v5';

export default {
65
  name: 'BreadcrumbNavigation',
nwindis's avatar
nwindis committed
66
  props: {
67
    config: {
nwindis's avatar
nwindis committed
68
69
70
71
      type: Object,
      required: true,
    },
  },
72
  computed: {
73
74
75
    redirectUrl() {
      return this.$route.query.redirectUrl || this.config.breadcrumbNavigation.website;
    },
76
77
78
79
    searchTerm() {
      return this.$route.query.searchTerm;
    },
  },
nwindis's avatar
nwindis committed
80
81
82
  created() {
    this.fasHome = fasHome;
    this.fasFileAlt = fasFileAlt;
83
    this.fasChevronRight = fasChevronRight;
84
    this.fasSearch = fasSearch;
nwindis's avatar
nwindis committed
85
86
87
88
89
90
91
92
93
94
95
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 12px;
}

96
97
98
99
100
.header-links {
  margin-left: 8px;
  text-decoration: none;
}

nwindis's avatar
nwindis committed
101
102
103
104
105
.q-breadcrumbs__el-icon {
  font-size: 100% !important;
}

</style>