FEATURE language select menu

src/components/language.vue

+<template>
+
+
+  <div class="language">
+    <q-btn
+      flat
+      color="grey"
+      label="">
+      <q-icon
+        class=""
+        size="md"
+        :name="fasLanguage" />
+      <q-menu
+        fit
+        anchor="center middle"
+        self="center middle">
+
+        <q-list style="min-width: 100px">
+          <q-item clickable v-close-popup>
+            <q-item-section>EN</q-item-section>
+          </q-item>
+          <q-item clickable v-close-popup>
+            <q-item-section>DE</q-item-section>
+          </q-item>
+        </q-list>
+
+      </q-menu>
+    </q-btn>
+      <!--
+      <q-btn color="primary" label="Anchor/Self Menu">
+        <q-menu
+          anchor="center middle"
+          self="center middle"
+        >
+          <q-list style="min-width: 100px">
+            <q-item clickable v-close-popup>
+              <q-item-section>anchor="center middle"</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup>
+              <q-item-section>self="center middle"</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+-->
+<!--
+    <q-btn-dropdown
+      dense
+      flat
+      color="red"
+      label="Language Switch" dropdown-icon="fasChevronRight">
+      <q-list>
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section>
+            <q-item-label>Deutsch</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section>
+            <q-item-label>English</q-item-label>
+          </q-item-section>
+        </q-item>
+
+      </q-list>
+
+    </q-btn-dropdown>
+    -->
+  </div>
+</template>
+
+<script>
+import { fasLanguage } from '@quasar/extras/fontawesome-v5';
+
+export default {
+  name: 'Language',
+  methods: {
+    onItemClick() {
+      // console.log('Clicked on an Item')
+    },
+  },
+  created() {
+    this.fasLanguage = fasLanguage;
+  },
+};
+</script>

src/components/quasar-header.vue

 <template>
   <q-header elevated class="bg-white text-black">
-    <div class="bar row justify-center">
+    <div class="bar row justify-between items-center">
       <Infobar v-if="manifests.length"
-        class="
-          col-auto
-          col-12
-          q-px-md
-          "
+        class="col-xs-12 col-md-11 q-pl-md"
         :collectiontitle="collectiontitle"
         :manifests="manifests"
         :pagelabel="pagelabel"
       />
+      <Language
+        class="col-xs-12 col-md-1 q-pr-md content-md-end"
+        />
     </div>
 
     <div class="bar row q-px-md justify-sm-between">
@@ -48,6 +47,7 @@
 import Infobar from '@/components/infobar.vue';
 import Navbar from '@/components/navbar.vue';
 import Togglebar from '@/components/togglebar.vue';
+import Language from '@/components/language.vue';
 
 export default {
   name: 'Header',
@@ -55,6 +55,7 @@ export default {
     Infobar,
     Navbar,
     Togglebar,
+    Language,
   },
   props: {
     collectiontitle: String,