TopNav.vue 3.12 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <v-app-bar 
      color="primary"
      app
      dark
      dense
    >
      <v-toolbar-title>CheneTAL</v-toolbar-title>
      
      <v-spacer></v-spacer>
      
      <v-toolbar-items>
        <v-btn to="/" text>
          <v-icon small left>fa-home</v-icon>
          Home
        </v-btn>
        <v-btn to="/treatment" text>
          Modules
        </v-btn>
Quentin David's avatar
Quentin David committed
21
        <v-btn to="/validation" text>
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
          Result
        </v-btn>
        <v-spacer/>
        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              v-bind="attrs"
              v-on="on"
              text
            >
            <v-icon left>mdi-translate</v-icon>
            {{ chosen_language }}
            <v-icon right>fa-caret-down</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="lang in web_languages"
Quentin David's avatar
Quentin David committed
40
41
              :key="lang.locale"
              @click="changeLocale(lang.locale)"
42
            >
Quentin David's avatar
Quentin David committed
43
44
45
46
              <v-list-item-icon>
                <flag :iso="lang.iso"/>
              </v-list-item-icon>
              <v-list-item-content >
Quentin David's avatar
Quentin David committed
47
                {{ lang.language }}
Quentin David's avatar
Quentin David committed
48
              </v-list-item-content>
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
            </v-list-item>
          </v-list>
        </v-menu>
        <v-menu offset-y>
          <template v-slot:activator="{on,attrs}">
            <v-btn text v-on="on" v-bind="attrs">
              <v-icon small left>fa-user</v-icon>
                John Doe
            </v-btn>
          </template>
            <v-list>
              <v-list-item
                v-for="item in items"
                :key="item.title"
                :to="item.link"
                link
              >
Quentin David's avatar
Quentin David committed
66
67
                <v-list-item-icon class="mr-2">
                  <v-icon small>{{ item.icon }}</v-icon>
68
69
                </v-list-item-icon>
                <v-list-item-content>
Quentin David's avatar
Quentin David committed
70
                  <v-list-item-title>{{ $t(item.title) }}</v-list-item-title>
71
72
73
74
75
76
77
78
79
80
                </v-list-item-content>
              </v-list-item>
            </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
Quentin David's avatar
Quentin David committed
81

82
83
84
85
86
module.exports = {
  data() {
    return {
      drawer: false,
      items: [
Quentin David's avatar
Quentin David committed
87
88
89
90
91
        { title: 'my-profile', link: '/profile', icon: 'fa-address-card' },
        { title: 'my-treatments', link: '/user/list', icon: 'fa-cogs' },
        { title: 'my-corpora', link: 'cart', icon: 'fa-copy' }
      ],
      web_languages: [
Quentin David's avatar
Quentin David committed
92
93
        { "language":"Français", "locale":"fr", "iso":"FR" },
        { "language": "English", "locale":"en", "iso":"GB"},
94
95
      ],
    }
Quentin David's avatar
Quentin David committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
  },
  computed: {
    chosen_language: function() {
      var localeToLanguage = {
        "fr":"Français",
        "en":"English",
      };
      return localeToLanguage[this.$i18n.locale];
    }
  },
  methods: {
    changeLocale(lang) {
      this.$root.$i18n.locale = lang;
    }
  }
}
</script>
<i18n>
{
  "fr": {
    "my-profile":"Mon profil",
    "my-treatments":"Mes traitements",
    "my-corpora":"Mes corpora"
  },
  "en": {
    "my-profile":"My profile",
    "my-treatments":"My treatments",
    "my-corpora":"My corpora"
124
125
  }
}
Quentin David's avatar
Quentin David committed
126
</i18n>