src/components/Article.vue

 <template>
-  <article v-show="article.lemmas.length">
-    <Header :lemmas="article.lemmas" />
-    <section v-if="article.body.pronunciation.length">
-      <h3>Uttale</h3>
-        <ul>
-          <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' @article-click="article_link_click" />
-        </ul>
-    </section>
-    <section v-if="article.body.etymology">
-      <h3>Etymologi</h3>
+<div v-if="article" :lang="{nob:'nb', nno: 'nn', eng: 'en', 'ukr': 'uk'}[dictionary]" class="article-container">
+  <span :lang="lang_tag_locale" v-if="$vuetify.breakpoint.smAndDown || !$route.name || $route.name == 'lookup'" class="dict-label" role="heading" aria-level="2">{{dict_label}}</span>
+  <div class="article" v-bind:class="{'expanded': !collapsed && collapsable, 'collapsable': collapsable, 'hide-label': hide_label, 'v-sheet v-card rounded-xl': !$parent.article}" v-if="article">
+    <div :class="$vuetify.breakpoint.name" v-if="!invalid">
+    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" @toggle-collapse = "toggle_collapse"/>
+
+    <div class="article_content" :class="$vuetify.breakpoint.name" v-show="!collapsed" ref="article_content">
+      <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.pronunciation', content_locale)}}</h4>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" @error="article_error"/>
+          </ul>
+      </section>
+      <section v-if="article.body.etymology && article.body.etymology.length" class="etymology">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.etymology', content_locale)}}</h4>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click"  @error="article_error"/>
+          </ul>
+      </section>
+      <section class="definitions" v-if="has_content">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.definitions', content_locale)}}</h4>
+        <ol>
+          <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click"  @error="article_error"/>
+        </ol>
+      </section>
+      <section v-if="sub_articles.length" class="expressions">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.expressions', content_locale)}}</h4>
         <ul>
-          <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' @article-click="article_link_click" />
+          <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click"  @error="article_error"/>
         </ul>
-    </section>
-    <section>
-      <h3>Definisjoner</h3>
-      <ol>
-        <Definition v-for="definition in article.body.definitions" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
-      </ol>
-    </section>
-  </article>
+      </section>
+    </div>
+    <ArticleFooter v-if="!collapsed" :article="article"/>
+    </div>
+    <div v-else><v-icon left>warning</v-icon> {{$t('error.article', {no: article.article_id, dict: $t('dicts_inline.'+this.dictionary)})}}</div>
+  </div>
+</div>
 </template>
 
 <script>
-//import axios from "axios";
 import DefElement from './DefElement.vue'
 import Definition from './Definition.vue'
+import SubArticle from './SubArticle.vue'
 import Header from './Header.vue'
+import ArticleFooter from './ArticleFooter.vue'
+import entities from '../utils/entities.js'
+import Mark from 'mark.js';
+
+function find_sub_articles(definition) {
+  let sub_art_list = []
+  try {
+    let sub_definitions = definition.elements.filter(el => el.type_ == 'definition')
+    let sub_articles = definition.elements.filter(el => el.type_ == 'sub_article' && el.lemmas)
+
+      sub_definitions.forEach((subdef, i) => {
+        sub_art_list = sub_art_list.concat(find_sub_articles(subdef))
+      })
+      sub_art_list = sub_art_list.concat(sub_articles)
+  return sub_art_list
+
+  }
+  catch(error) {
+    console.log("find_sub_articles", this.article.article_id, this.dictionary,  '"'+error.message+'"')
+
+    return []
+  }
+}
+
 
 export default {
   name: 'Article',
   props: {
-    article: Object
+    article: Object,
+    articleLookup: Boolean,
+    title_id: String,
+    queryPattern: String,
+    scope: String,
+  },
+  data: function() {
+    return {
+      is_collapsed: true,
+      invalid: false
+    }
+  },
+  metaInfo() {
+    if (this.articleLookup) {
+      return {title: this.article.lemmas[0].lemma + ' | ' + {"bm,nn": "Bokmålsordboka og Nynorskordboka", "bm": "Bokmålsordboka", "nn": "Nynorskordboka"}[this.dictionary],
+              meta: [{name: 'description', vmid: 'description', content: this.meta_description}],
+              link: [{rel: "canonical", href: `https://ordbokene.no/${this.article.dictionary}/${this.article.article_id}`} ]
+      }
+    }
+  },
+  computed: {
+    hide_label: function() {
+      //collapsable || (collapsed && $store.state.collapseArticles != 'never')
+      if (this.$parent.count_bm || this.$parent.count_nn) {
+        let two_results = (this.$parent.count_bm + this.$parent.count_nn) < 3
+        if (two_results) {
+          return false
+        }
+        else if (this.$vuetify.breakpoint.mdAndUp && (this.collapsed || this.$store.state.collapseArticles == 'never')) {
+          return true
+        }
+        else {
+          return false
+        }
+      }
+    },
+    dictionary: function() {
+      return this.article.dictionary
+    },
+    content_locale: function() {
+      if (this.$i18n.locale == 'eng') {
+        return 'eng'
+      } else if (this.$i18n.locale == 'ukr') {
+        return 'ukr'
+      } else {
+        return {bm: 'nob', nn: 'nno'}[this.dictionary]
+      }
+    },
+    fulltext_highlight: function() {
+      return this.$store.state.fulltextHighlight
+    },
+    collapsable: function() {
+      if (this.$parent.$options.name != 'SearchResults') {
+        this.is_collapsed = false
+        return false
+      }
+      let collapsable = this.$store.state.collapseArticles
+      if (collapsable == 'never') {
+        this.is_collapsed = false
+        return false
+      }
+      if (collapsable == 'always') {
+        this.is_collapsed = true
+        return true
+      }
+      if (collapsable == 'auto') {
+        this.is_collapsed = this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+        return this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+      }
+    },
+    collapsed: {
+      get() {
+        if (this.$parent.$options.name != 'SearchResults') {
+          return false
+        }
+        if (!this.collapsable) {
+          this.is_collapsed = false
+        }
+        return this.is_collapsed
+      },
+      set(value) {
+        this.is_collapsed = value
+      }
+    },
+    snippet: function() {
+    if (this.collapsable && this.article.body.definitions) {
+      return this.meta_description
+    }
+    return null
+    },
+    meta_description: function() {
+      return this.parse_definitions(this.article.body.definitions)
+    },
+    link_to_self: function() {
+      try {
+      return  {
+        ref: '/' + this.dictionary + '/' + this.article.article_id,
+        article: this.article
+      }
+      } catch(error) {
+        console.log("link_to_self",this.article.article_id, this.dictionary,  '"'+error.message+'"')
+        this.invalid = true
+        //console.error(error)
+        return {ref: "", article: this.article}
+      }
+    },
+    lang_tag_locale: function() {
+        return {nob: "nb", nno: "nn", eng: "en", ukr: "uk"}[this.content_locale]
+    },
+    dict_label: function() {
+      let label = ''
+      const dictionary = this?.article?.dictionary
+      if (dictionary) {
+        if (this.$route.name) {
+          label = this.$t(`dicts.${dictionary}`, this.content_locale)
+        } else {
+          label = this.$t('from', this.content_locale) + " " + this.$t(`dicts_from.${dictionary}`, this.content_locale)
+        }
+      }
+      return label
+    },
+    sub_articles: function() {
+      return this.article.body.definitions.reduce((acc, val) => acc.concat(find_sub_articles(val)), []).sort((s1, s2) => s1.lemmas[0].localeCompare(s2.lemmas[0]))
+    },
+    has_content: function() {
+      for (const definition of this.article.body.definitions) {
+        for (const element of definition.elements) {
+          if (['explanation', 'example', 'compound_list', 'definition'].includes(element.type_)) {
+            return true
+          }
+        }
+      }
+      return false
+    }
   },
   components: {
     DefElement,
     Definition,
-    Header
+    SubArticle,
+    Header,
+    ArticleFooter
   },
-  computed: {
-    definitions: function() {
-      let defs = this.article.body.definitions
-      if (defs.length == 1) {
-        let types = defs[0].elements.reduce((acc, toAdd)=>acc.add(toAdd.type_), new Set())
-        if (types.size == 1 && types.has('definition')) {
-          return defs[0].elements
-        }
+  mounted: function() {
+    if (this.scope && this.scope.includes("f")) {
+      let instance = new Mark(this.$refs.article_content)
+      if (/[_%|]/.test(this.queryPattern)) {
+        instance.markRegExp(new RegExp(this.queryPattern), {acrossElements: true, separateWordSearch:false});
+      }
+      else {
+        instance.mark(this.queryPattern, {acrossElements: true, separateWordSearch:false, accuracy: 'exact', wildcards: 'enabled'});
       }
-      return defs
+
+    }
+
+
+    if (this.$route.hash == "#"+ this.title_id) {
+      let focused = document.getElementById(this.title_id)
+      if (focused) focused.focus()
+    }
+    else if (this.$route.hash) {
+      let focused =document.getElementById(this.$route.hash.replace("#",""))
+      if (focused) focused.scrollIntoView({block: "center"})
     }
   },
   methods: {
+    article_error: function(payload) {
+      console.log("DefElement",payload.location, this.article.article_id, this.dictionary,  '"'+payload.message+'"')
+    },
+    parse_subitems: function(explanation, text) {
+          let new_string = ""
+          let old_parts = text.split(/(\$)/)
+          let linkIndex = 0
+          let self = this
+
+          old_parts.forEach((item) => {
+            if (item == '$') {
+              let subitem = explanation.items[linkIndex]
+              if (/^\d$/.test(subitem.text)) {
+                if (subitem.type_ == "superscript") {
+                new_string += "⁰¹²³⁴⁵⁶⁷⁸⁹"[parseInt(subitem.text)]
+                }
+                else if (subitem.type_ == "subscript") {
+                  new_string += "₀₁₂₃₄₅₆₇₈₉"[parseInt(subitem.text)]
+                }
+              }
+
+              else if (subitem.id) {
+                new_string += entities[self.dictionary][explanation.items[linkIndex].id].expansion
+
+              }
+              else if (subitem.text) {
+                 if (subitem.text.includes('$')) {
+                   new_string += self.parse_subitems(subitem, subitem.text)
+                 }
+                 else new_string += subitem.text
+              }
+              else  {
+                if (explanation.items[linkIndex].lemmas) {
+                new_string +=  explanation.items[linkIndex].word_form || explanation.items[linkIndex].lemmas[0].lemma
+                }
+              }
+              linkIndex += 1
+            }
+            else {
+              new_string += item
+            }
+          })
+          return new_string
+
+    },
+    parse_definitions: function(node) {
+      let definitionTexts = []
+      let self = this
+      try {
+      node.forEach((definition) => {
+        if (definition.elements) {
+        if (definition.elements[0].content) {
+          let new_string = self.parse_subitems(definition.elements[0], definition.elements[0].content)
+          if (new_string.substring(new_string.length, new_string.length - 1) == ":") {
+            new_string = new_string.slice(0, -1)
+          }
+          definitionTexts.push(new_string)
+
+        }
+        else if (definition.elements[0].elements) {
+          definitionTexts.push(self.parse_definitions(definition.elements))
+        }
+      }
+      })
+      } catch(error) {
+        console.log("parse_definitions",this.article.article_id, this.dictionary,  '"'+error.message+'"')
+        this.invalid = true
+        definitionTexts = []
+      }
+
+      let snippet = definitionTexts.join("\u00A0•\u00A0")
+      return snippet
+
+    },
+    toggle_collapse: function() {
+      if (this.collapsed) {
+        this.$plausible.trackEvent('expand article', {props: {article: `${this.dictionary} ${this.article.article_id}`}})
+      }
+      this.collapsed = !this.collapsed
+    },
+
     article_link_click: function(item) {
       this.$emit('article-click', item)
+    },
+    details_click: function(item) {
+      item.title_id = this.title_id
+      this.$emit('details-click', item)
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-article {
-  margin-top: 30px;
+.article {
+  position: relative;
+  padding: 24px;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  margin-right: 10px;
+  margin-left: 10px;
+  background-color: #ffffff;
+}
+
+section.xs .article, section.sm .article {
+  margin-bottom: 10px !important;
+}
+
+section.md .article, section.lg .article, section.xl .article {
+  padding-top: 10px;
+}
+
+
+.welcome .article_footer {
+  display: block;
+}
+
+#single_article_container .article {
+  border: none;
+  margin-top: 10px;
+}
+
+
+section {
+  padding-top: 10px;
+  padding-bottom: 10px
+}
+
+
+section.etymology > h4, section.pronunciation > h4 {
+  display: inline;
+}
+
+section.etymology ul, section.pronunciation ul, section.etymology li, section.pronunciation li {
+  display: inline;
 }
 
-h3 {
-  margin: 40px 0 0;
-  color: #560027;
+section.etymology li:not(:first-child):not(:last-child):before, section.pronunciation li:not(:first-child):not(:last-child):before {
+  content: ", ";
 }
 
-a {
-  color: #560027;
+section.etymology li:not(:first-child):last-child:before, section.pronunciation li:not(:first-child):last-child:before {
+  content: "; ";
+  font-size: smaller;
 }
 
 li {
@@ -81,24 +389,26 @@ li.level1.definition {
   list-style: upper-alpha;
 }
 
+li.level2.definition {
+  list-style: decimal;
+}
+
 li.level3.definition {
-  list-style: lower-alpha;
+  /* Norsk ordbok skal ha "lower.alpha" her */
+  list-style: disc;
 }
 
 li.sub_article > ul {
   padding-left: 0px;
 }
 
-li.definition.level1, li.definition.level2 {
-  padding-bottom: 2em;
-}
-
 ::marker {
   font-weight: bold;
-  color: #560027;
+  color: var(--v-primary-base);
 }
 
-ol > li:only-child.level1, li:only-child.level2, li:only-child.level3 {
+ol > li:only-child.level1, li:only-child.level2 {
+  /* level3 a.k.a. underdefinisjoner skal vises med bullet selv om de står alene */
   list-style: none;
 }
 
@@ -106,17 +416,48 @@ li:only-child.level1 > ol {
   padding-left: 0px;
 }
 
-ul {
-  padding-top: 8px;
-  padding-left: 20px;
+ul, ol {
+  padding-left: 12px !important;
 }
 
 ul li {
-list-style:none;
+  list-style:none;
 }
 
 ul li.definition {
   list-style: disc;
 }
 
+
+
+.choose {
+  color: var(--v-primary-base) !important;
+  text-decoration: none;
+}
+
+.info-card {
+  padding: 12px;
+}
+
+.expanded {
+  padding-bottom: 34px;
+}
+
+
+.header {
+  border-radius: 0px !important;
+}
+
+.dict-label {
+  color: var(--v-primary-base)  ;
+  font-weight: bold;
+  position: absolute;
+  padding-left: 34px;
+  margin-top: -2px;
+  z-index: 2;
+  font-variant-caps: all-small-caps;
+  font-size: 1.17em;
+}
+
+
 </style>

src/components/ArticleFooter.vue

+<template>
+  <div :lang="lang_tag_locale" class="article_footer">
+     <v-snackbar centered
+                max-width="300px"
+                min-width="300px"
+                max-height="36px"
+                min-height="36px"
+                rounded="pill"
+                v-model='copy_popup'
+                timeout="1000">
+
+        <span class="text-center">{{$t(what_copied, content_locale)}}</span>
+      </v-snackbar>
+
+      <v-btn v-if="showLinkCopy"
+             small text class="toolbar-button" rounded @click="copy_link">
+        <v-icon small left>link</v-icon><span class = "button-text">{{$t("article.copy_link", content_locale)}}</span>
+      </v-btn>
+
+      <v-btn v-if="webShareApiSupported" text small class="toolbar-button" rounded @click="shareViaWebShare">
+        <v-icon small left>share</v-icon><span class = "button-text">{{$t("article.share", content_locale)}}</span>
+      </v-btn>
+
+      <v-dialog max-width="600px" v-model="citation_dialog">
+        <template v-slot:activator="{ on, attrs }">
+            <v-btn @click="track_citation" text small class="toolbar-button" rounded v-on="on" v-bind="attrs">
+        <v-icon left small>format_quote</v-icon> <span class = "button-text">{{$t("article.cite", content_locale)}}</span>
+      </v-btn>
+      
+
+        </template>
+
+        <v-card>
+          <v-toolbar elevation="0">
+            <v-toolbar-title><span role="heading" aria-level="1">{{$t('article.cite_title')}}</span></v-toolbar-title>
+            <v-spacer></v-spacer><v-toolbar-items><v-btn @click="close_citation_dialog" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items></v-toolbar>
+          <v-card-text class="text--primary">
+          {{$t("article.cite_description[0]", content_locale)}}<em>{{$t('dicts.'+$parent.dictionary)}}</em>{{$t("article.cite_description[1]", content_locale)}}
+          <br/>
+          <div id = "citation" v-html="this.create_citation()"/>
+          </v-card-text>
+          <v-card-actions>
+          <v-btn depressed small rounded @click="copy_citation"><br>
+            <v-icon left small icon>content_copy</v-icon>  <span class = "button-text">{{$t("article.copy", content_locale)}}</span>
+          </v-btn>
+                    <v-btn depressed small rounded @click="download_ris"><br>
+            <v-icon left small icon>get_app</v-icon> <span class = "button-text">{{$t("article.download")}}</span>
+          </v-btn>
+                    
+          </v-card-actions>
+
+        </v-card>
+
+      </v-dialog>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleFooter',
+  props: {
+    article: Object
+  },
+    computed: {
+    webShareApiSupported() {
+      return navigator.share
+    },
+    showLinkCopy() {
+      return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard
+    },
+    hasPointer() {
+      return window.matchMedia('(hover: hover) and (pointer: fine)').matches
+    },
+    content_locale: function() {
+      return this.$parent.content_locale
+    },
+    lang_tag_locale: function() {
+      return this.$parent.lang_tag_locale
+    }
+  },
+  data: function() {
+    return {
+      copy_popup: false,
+      citation_dialog: false,
+      what_copied: null
+    }
+
+  },
+  methods: {
+    track_citation() {
+      this.$plausible.trackEvent('citation click', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+    },
+    shareViaWebShare() {
+      this.$plausible.trackEvent('webshare', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+      navigator.share({
+        title: "Ordbøkene.no: " + this.article.lemmas[0].lemma,
+        text: "",
+        url: "/" + this.article.dictionary + '/' + this.article.article_id
+      })
+    },
+    create_link() {
+      return 'https://ordbokene.no/' + this.article.dictionary + '/' + this.article.article_id
+    },
+    get_citation_info() {
+      let date = new Date();
+      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
+      let mm = (date.getMonth() < 9? '0' : '') + (date.getMonth()+1)
+      let yyyy = date.getFullYear()
+      let link = this.create_link()
+      let lemma = this.article.lemmas[0].lemma
+      let dict = this.$t(`dicts.${this.article.dictionary}`, this.content_locale)
+      return [lemma, dd, mm, yyyy, link, dict]
+    },
+    create_citation() {
+      const [lemma, dd, mm, yyyy, link, dict] = this.get_citation_info()
+      let citation = this.$t("article.citation", {lemma, link, dd, mm, yyyy, dict})
+
+      return citation
+    },
+    copy_link() {
+      let link = this.create_link()
+      console.log(`${this.$parent.dictionary} ${this.$parent.article.article_id}`)
+      this.$plausible.trackEvent('copy link', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+      let self = this
+         navigator.clipboard.writeText(link).then(() => {
+           self.what_copied = this.$t("article.link_copied")
+           self.copy_popup = true
+         }).catch(err => {
+           console.log("ERROR COPYING:",err)
+         })
+    },
+
+    copy_citation() {
+
+      let citation = document.getElementById("citation").textContent;
+      navigator.clipboard.writeText(citation)
+      this.citation_dialog = false
+      this.what_copied = this.$t("article.citation_copied")
+      this.copy_popup = true
+    },
+
+    close_citation_dialog() {
+      this.citation_dialog = false
+    },
+    download_ris() {
+      const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
+      const a = document.createElement("a")
+      a.style = "display: none"
+      a.setAttribute("download", `${lemma}_${this.article.dictionary}.ris`)
+      const dict = {"bm":"Bokmålsordboka", "nn": "Nynorskordboka"}[this.article.dictionary]
+      const text = `TY  - DICT\nTI  - ${lemma}\nT2  - ${dict}\nPB  - Språkrådet og Universitetet i Bergen\nUR  - ${link}\nY2  - ${yyyy}/${mm}/${dd}/\nER  - `
+      a.setAttribute('href', 'data:application/x-research-info-systems;charset=utf-8,' + encodeURIComponent(text));
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+    },
+  }
+}
+
+</script>
+<style scoped>
+
+.v-icon {
+  color: var(--v-primary-base) !important;
+}
+
+.toolbar-button {
+  margin-right: 8px;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+
+.article_footer {
+  color: var(--v-primary-base);
+  padding-top: 24px;
+}
+
+#citation {
+  margin-top: 12px;
+  padding: 12px;
+  background-color: var(--v-button-base) !important;
+  margin-bottom: 6px;
+}
+
+</style>

src/components/CompoundList.vue

 <template>
   <li class="compound_list">
     <ul>
-      <DefElement :body="body.intro" v-if="body.intro" />
-      <li :key="index" v-for="(item, index) in body.elements">
-        <router-link :to="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"  @click.native="article_link_click(item)">
-          <span class="homograph" :key="index">{{item.lemmas[0].hgno ? String.fromCharCode(0x215f + item.lemmas[0].hgno) : ''}}</span>
-          {{item.lemmas[0].lemma}};
-        </router-link>
+      <DefElement :body="body.intro" v-if="body.intro" :dictionary="dictionary" />
+      <li
+        :key="index"
+        v-for="(item, index) in body.elements"
+        >{{' '}}<router-link
+          :to="'/' + dictionary + '/' + item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"
+          @click.native="article_link_click(item)"
+          >{{item.lemmas[0].lemma}}</router-link>
       </li>
     </ul>
   </li>
@@ -18,7 +20,8 @@ import DefElement from './DefElement.vue'
 export default {
   name: 'CompoundList',
   props: {
-    body: Object
+    body: Object,
+    dictionary: String
   },
   components: {
     DefElement
@@ -34,4 +37,12 @@ export default {
   li.compound_list ul li {
     display: inline;
   }
+
+  li.compound_list li:not(:last-child):not(:first-child):after {
+    content: ",";
+  }
+
+  ul {
+    padding-left: 0px !important;
+  }
 </style>

src/components/Contact.vue

+<template>
+
+<v-list>
+            <v-list-item>
+              <div>
+              <h2>{{$t('contact.content[0]')}}</h2><p>
+              {{$t('contact.content[2]')}} <a href="mailto:ordbok@uib.no">ordbok@uib.no</a></p>
+              <h2>{{$t('contact.content[1]')}}</h2><p>
+              {{$t('contact.content[3]')}} <span style="white-space: nowrap;"><a href="mailto:ordbok-teknisk@uib.no">ordbok-teknisk@uib.no</a></span></p>
+              
+              </div>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>
+               <h2>{{$t('contact.faq.title')}}</h2>
+              </v-list-item-title>
+            </v-list-item>
+
+             <v-list-group dense prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[0].title')}}</v-list-item-content>
+            
+          </template>
+    <v-list-item><p><em>{{$t('dicts.bm')}}</em>{{$t('and')}}<em>{{$t('dicts.nn')}}</em>{{$t('contact.faq.items[0].text[0]')}}<router-link to="/om" @click.native="$emit('close')">{{$t('contact.faq.items[0].text[1]')}}</router-link></p></v-list-item>
+               </v-list-group>
+
+            <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[1].title')}}</v-list-item-content>
+          </template>
+    <v-list-item>{{$t('contact.faq.items[1].text')}}</v-list-item>
+               </v-list-group>
+               <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[2].title')}}</v-list-item-content>
+          </template>
+    <v-list-item>{{$t('contact.faq.items[2].text')}}</v-list-item>
+               </v-list-group>
+          </v-list>
+
+</template>
+
+<script>
+
+
+  export default {
+    name: "Contact",
+  }
+</script>
+
+
+

src/components/DefElement.vue

@@ -2,18 +2,37 @@
   <li :is="tag" :class="body.type_"><!--
  --><span :is="item.tag || 'span'" v-for="(item, index) in assemble_text"
           :class="item.type"
+          @error="article_error"
           :key="index"
            v-bind="item.props"><!--
           -->{{item.html}}<!--
-       --><router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)"><!--
-         -->{{item.lemmas[0].lemma}} {{item.definition_order ? ` (${item.definition_order})` : ''}}<!--
-       --></router-link><!--
+          
+       --><router-link class="article_ref" v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)" :key="index"><!--
+       --><DefElement tag='span' v-if="item.link_text.type_" :dictionary="dictionary" :key="item.id+'_sub'" :body='item.link_text'/><span v-else>{{item.link_text}}</span><!--
+       --><span class="homograph" v-if="item.lemmas[0].hgno" :aria-label="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :title="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :key="index"><!--
+        --> ({{roman_hgno(item.lemmas[0])}}{{item.definition_order ? '': ')'}}</span>
+        <span class="def_order" v-if="item.definition_order" :aria-label="'definisjon '+item.definition_order">{{item.lemmas[0].hgno ? ', ': ' ('}}{{item.definition_order}})</span>
+       </router-link>
+
+       <!--
+       --><span class="numerator" v-if="item.type == 'fraction'">{{item.num}}</span><!--
+       -->{{item.type == 'fraction' ? '⁄' : ''}}<!--
+       --><span class="denominator" v-if="item.type == 'fraction'">{{item.denom}}</span><!--
  --></span></li>
 </template>
 
 <script>
 import entities from '../utils/entities.js'
-import languages from '../utils/languages.js'
+import helpers from '../utils/helpers.js'
+
+function replace_grammar_id(item, lang) {
+  let content = item.content
+  if (content.includes('$') && (item.items[0].id)){
+    let replacement_item = entities[lang][item.items[0].id]['expansion']
+    content = content.replace('$', replacement_item)}
+
+  return content
+}
 
 export default {
   name: 'DefElement',
@@ -22,33 +41,67 @@ export default {
     tag: {
       type: String,
       default: 'li'
+    },
+    dictionary: String
+  },
+  data: function() {
+    return {
+      path: this.$route.fullPath
     }
   },
   computed: {
+    fulltext_highlight: function() {
+      return this.$store.state.fulltextHighlight
+    },
     unparsed: function(){
-      return this.body.items.map(
-        function(item){
-          if      (item.type_ == 'usage') return {type: item.type_, html: item.text, tag: 'mark'}
-          else if (item.type_ == 'article_ref') return {
-                                                          type: item.type_,
-                                                          html: '',
-                                                          lemmas: item.lemmas,
-                                                          ref: item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
-                                                          article_id: item.article_id,
-                                                          definition_id: item.definition_id,
-                                                          definition_order: item.definition_order
-                                                        }
-          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
-          else if (item.type_ == 'superscript') return {type: item.type_, html: item.text, tag: 'sup'}
-          else if (item.type_ == 'subscript') return {type: item.type_, html: item.text, 'tag': 'sub'}
-          else if (item.type_ == 'quote_inset') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i'}}
-          else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || item.id}
-          else return {type: item.type_ || 'plain', html: item}
+      try {
+        let lang = this.dictionary
+        let path = this.path
+        return this.body.items.map(
+          function(item){
+            if (item.type_ == 'usage') {
+              if (item.items) {
+                item.content = item.text
+                return {type: item.type_, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+              }
+              else {
+                return {type: item.type_, html: item.text, tag: 'i'}
+              }
+            }
+            else if (item.type_ == 'article_ref') {
+                return {
+                    type: item.type_,
+                    html: '',
+                    lemmas: item.lemmas,
+                    link_text: item.word_form || item.lemmas[0].annotated_lemma ||  item.lemmas[0].lemma,
+                    ref: '/' + lang + '/' + item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
+                    article_id: item.article_id,
+                    definition_id: item.definition_id,
+                    definition_order: item.definition_order,
+                    source: path
+                    }
+                } 
+            else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
+            else if (item.type_ == 'pronunciation_guide') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+            else if (item.type_ == 'superscript') return {type: item.type_, html: item.text, tag: 'sup'}
+            else if (item.type_ == 'subscript') return {type: item.type_, html: item.text, tag: 'sub'}
+            else if (item.type_ == 'quote_inset') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+            else if (item.type_ == 'fraction') return helpers.fraction(item.numerator, item.denominator)
+            else if (item.id) return {type: item.type_, html:  (entities[lang][item.id] || {})['expansion'] || item.id}
+            else return {type: item.type_ || 'plain', html: item}
         }
       )
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "unparsed", message: error.message} )
+        return {type: 'plain', html: item}
+      }
+
     },
     assemble_text: function(){
-      var old_parts = this.body.content.split(/(\$)/)
+      try {
+              var old_parts = this.body.content.split(/(\$)/)
       var text_items = this.unparsed.slice(0).reverse()
       var new_parts = []
       old_parts.forEach(function(item){
@@ -59,37 +112,77 @@ export default {
         }
       })
       return new_parts
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "assemble_text", message: error.message} )
+        return []
+      }
+
     }
   },
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    article_error: function(payload) {
+      this.$emit('error', payload)
+    },
+    roman_hgno: helpers.roman_hgno
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.usage, .pronunciation {
+.usage {
   font-style: italic;
 }
 
-mark {
-  background: rgba(255, 255, 255, 0);
+.pronunciation_guide {
+  font-size: smaller;
+}
+
+.numerator{
+  vertical-align: super;
+  padding-right: 2px;
+  font-size: smaller;
 }
 
-span.language {
-  font-weight: bold;
+.denominator {
+  vertical-align: sub;
+  padding-left: 2px;
+  font-size: smaller;
+}
+
+
+mark {
+  background: rgba(255, 255, 255, 0);
+  color: inherit;
 }
 
 i {
   font-style: normal;
-  font-family: monospace;
 }
 
-.homograph {
-  vertical-align: sub;
+
+.link_text {
+  text-decoration: underline;
+
+}
+
+.homograph, .def_order{
+  text-decoration: none !important;
+  color: black
+
+}
+
+q:before {
+  content: none;
+}
+
+q:after {
+  content: none;
 }
 
 </style>

src/components/Definition.vue

 <template>
-  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
-    <ul class="explanation">
-      <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li>
+  <li :class="['definition', 'level'+level]"  :ref="level != 9 ? 'def' + body.id : ''" :id="level != 9? 'def' + body.id : ''">
+    <span v-if="level!=9"/>
+    <ul class="explanations">
+      <DefElement :body="explanation" :dictionary="dictionary" :has_article_ref=has_article_ref(explanation) v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
     </ul>
-    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
-      <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs" :key="index" @article-click="article_link_click" />
+    <div v-if="examples.length">
+      <h5 :lang="lang_tag_locale" v-if="level < 3">{{$t('article.headings.examples', content_locale)}}</h5>
+      <ul class="examples">
+        <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" />
+      </ul>
     </div>
-    <ul class="sub_articles" v-if="subArticles.length">
-      <SubArticle :body="subart" v-for="(subart, index) in subArticles" :key="index" @article-click="article_link_click" />
+    <ul class="compound_lists">
+      <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" />
     </ul>
+    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
+      <Definition :def_number='index+1' :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
+    </div>
   </li>
 </template>
 
 <script>
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
-import SubArticle from './SubArticle.vue'
 import CompoundList from './CompoundList.vue'
 
 var Definition = {
   name: 'Definition',
   props: {
     body: Object,
-    level: Number
+    level: Number,
+    dictionary: String,
+    def_number: Number
+    
   },
   components: {
     DefElement,
     Definition,
     Example,
-    SubArticle,
     CompoundList
   },
   computed: {
-    template_name_added: function(){
-      return this.body.elements.filter(el => ! ['definition', 'sub_article'].includes(el.type_)).map(
-        function(element){
-          return {
-              'template': {
-                'explanation': 'DefElement',
-                'example': 'Example',
-                'compound_list': 'CompoundList'
-              }[element.type_] || 'li',
-              'element': element
-          }
-      })
+    explanations: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'explanation')
+      } catch (error) {
+        this.$emit('error', {location: "explanations", message: error.message})
+        return []
+      }
+    },
+    examples: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'example')
+      } catch (error) {
+        this.$emit('error', {location: "examples", message: error.message})
+        return []
+      }
+        
+    },
+    compund_lists: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'compound_list')
+      } catch (error) {
+        this.$emit('error', {location: "compound_lists", message: error.message})
+        return []
+      }
+        
     },
     subdefs: function() {
-      return this.body.elements.filter(el => el.type_ == 'definition')
+      try {
+        return this.body.elements.filter(el => el.type_ == 'definition').filter(def => def.elements.filter(el => el.type_ != 'sub_article').length > 0)
+
+      } catch (error) {
+        this.$emit('error', {location: "subdefs", message: error.message})
+        return []
+      }
+      // filtrerer bort definisjoner som bare inneholder underartikler
+      
+    },
+    content_locale: function() {
+      return this.$parent.content_locale
     },
-    subArticles: function() {
-      return this.body.elements.filter(el => el.type_ == 'sub_article')
+    lang_tag_locale: function() {
+      return this.$parent.lang_tag_locale
     }
-  },
+    
+    },
   mounted: function() {
     let ref = 'def' + this.body.id
     if(location.hash.substring(1) == ref){
-      this.$refs[ref].scrollIntoView()
+      this.$refs[ref].scrollIntoView({block: 'center'})
       this.$refs[ref].classList.add('highlighted')
     }
   },
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    has_article_ref: function(item){
+      if(item.items.length && item.items[0].type_ == "article_ref" && item.items[0].definition_id === undefined)
+        {
+          return "true";
+        }
+        else{
+          return "false";
+        }
+     }
   },
   watch:{
     $route(to, from) {
       let ref = 'def' + this.body.id
-      if(location.hash.substring(1) == ref){
-        this.$refs[ref].classList.add('highlighted')
-      }else{
-        this.$refs[ref].classList.remove('highlighted')
+      if (this.$refs[ref]) {
+        if(location.hash.substring(1) == ref){
+          this.$refs[ref].classList.add('highlighted')
+        }else {
+          this.$refs[ref].classList.remove('highlighted')
+        }
       }
     }
   }
@@ -83,8 +127,18 @@ q {
   font-style: italic;
 }
 
-.highlighted {
-  background-color: #ddddff;
-  border-radius: 5px;
+.highlighted, mark {
+  background-color: var(--v-tertiary-darken1);
+}
+
+mark {
+  font-weight: bold;
 }
+
+
+li[has_article_ref="true"] {
+  margin-top: 8px;
+  margin-left: -25px;
+}
+
 </style>

src/components/Example.vue

 <template>
   <li class="example">
-    <DefElement tag="q" :body="body.quote"  @article-click="article_link_click" /><span v-if="body.explanation && body.explanation.content.length"> - </span>
-    <DefElement tag="span" :body="body.explanation" v-if="body.explanation && body.explanation.content.length" @article-click="article_link_click" />
+    <DefElement tag="q" :body="body.quote"  @article-click="article_link_click" :dictionary="dictionary" /><span v-if="body.explanation && body.explanation.content.length"> – </span>
+    <DefElement tag="span" :body="body.explanation" v-if="body.explanation && body.explanation.content.length" @article-click="article_link_click" :dictionary="dictionary" />
   </li>
 </template>
 
@@ -11,7 +11,8 @@ import DefElement from './DefElement.vue'
 export default {
   name: 'Example',
   props: {
-    body: Object
+    body: Object,
+    dictionary: String
   },
   components: {
     DefElement

src/components/FooterMenu.vue

+<template>
+<span>
+      <v-btn v-if="$route.name!='about'" to="/om" small dark text>
+              <v-icon small left>info</v-icon>{{$t('menu.about')}}
+         </v-btn>
+               <v-btn v-if="$route.name=='about'" to="/" small dark text>
+              <v-icon small left>home</v-icon>{{$t('home')}}
+         </v-btn>
+
+                   <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="help_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>help</v-icon>{{$t('menu.help')}}
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title>{{$t('menu.help')}}</v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="help_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <v-card-text class="text--primary">
+            <br>
+          <Help/>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+
+      <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="settings_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>settings</v-icon><span>{{$t('settings.title')}}</span>
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title><span  role="heading" aria-level="1">{{$t('settings.title')}}</span></v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="settings_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <Settings/>
+        </v-card>
+      </v-dialog>
+
+          <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="contact_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>mail</v-icon><span>{{$t('contact.title')}}</span>
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title><span  role="heading" aria-level="1">{{$t('contact.title')}}</span></v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="contact_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <Contact @close="contact_dialog = false"/>
+        </v-card>
+      </v-dialog>
+      
+</span>
+</div>
+</template>
+<script>
+import Help from './Help.vue'
+import Contact from './Contact.vue'
+import Settings from './Settings.vue'
+
+  export default {
+    name: "FooterMenu",
+    components: {
+      Help,
+      Contact,
+      Settings
+    },
+    data: function() {
+    return {
+      contact_dialog: false,
+      help_dialog: false,
+      settings_dialog: false
+    }
+    }
+  }
+</script>
\ No newline at end of file

src/components/HeaderTitle.vue

+<template>
+<span>
+     <span v-bind:class="{ 'lookup': $route.name=='lookup'}" v-for="(lemma_group, i) in lemma_groups" :key="i">
+    <h3>
+                <!--
+    --><span v-for="(lemma, index) in lemma_group.lemmas"
+          :key="index"><DefElement v-if="lemma.annotated_lemma" :body="lemma.annotated_lemma" tag="span"/><span v-else>{{lemma.lemma}}</span><!--
+          --><span v-if="lemma.hgno"
+                   :aria-label="$t('accessibility.homograph') + parseInt(lemma.hgno)"
+                   :title="$t('accessibility.homograph')+parseInt(lemma.hgno)"
+                   class="hgno">{{" "+roman_hgno(lemma)}}</span><!--
+                    --><span
+                   class="title_comma"
+                   v-if="lemma_group.lemmas[1] && index < lemma_group.lemmas.length-1">{{", "}}
+                  </span>
+    </span>
+</h3>
+<h3 v-if="secondary_header_text">{{secondary_header_text}}</h3>  
+    <span :lang="$parent.$parent.lang_tag_locale" v-if="lemma_group.description" class="subheader">
+    <span class="header_group_list">{{lemma_group.description}}</span>
+          {{lemma_group.pos_group}}
+    <span v-if="$store.state.showInflectionNo" class="inflection_classes">{{lemma_group.inflection_classes}}</span>
+
+    </span>
+
+
+    </span>
+</span>
+</template>
+
+<script>
+import helpers from '../utils/helpers.js'
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'HeaderTitle',
+  components: {
+      DefElement
+  },
+  props: {
+      lemma_groups: Array,
+      secondary_header_text: String
+  },
+  methods: {
+      roman_hgno: helpers.roman_hgno,
+      
+  }
+}
+
+</script>
+

src/components/Menu.vue

+<template>
+          <v-card>
+            <v-list>
+               <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-title>{{$t('menu.help')}}</v-list-item-title>
+          </template>
+    <v-list-item><Help/></v-list-item>
+               </v-list-group>
+
+               <v-list-item link to="/om" v-on:click="$emit('close')">
+            <v-list-item-icon><v-icon>info</v-icon></v-list-item-icon>
+            <v-list-item-title>{{$t('menu.about')}}</v-list-item-title>
+            <v-list-item-icon><v-icon>chevron_right</v-icon></v-list-item-icon>
+              </v-list-item>
+
+
+
+
+              <v-list-group sub prepend-icon="language">
+                 <template v-slot:activator>
+            <v-list-item-title>{{$t('settings.locale.title')}}</v-list-item-title>
+          </template>
+          <v-list-item>
+     <v-list subheader>
+      <v-radio-group v-model="updateLocale" :label="$t('settings.locale.description')">
+        <v-radio value="nob" label="Bokmål (nob)"></v-radio>
+        <v-radio value="nno" label="Nynorsk (nno)"></v-radio>
+        <v-radio value="eng" label="English (eng)"></v-radio>
+        <v-radio value="ukr" label="Українська (ukr)"></v-radio>
+      </v-radio-group>
+      </v-list></v-list-item>
+              </v-list-group>
+
+                            <v-list-group v-if="false" prepend-icon="book">
+                 <template v-slot:activator>
+            <v-list-item-title>{{$t('settings.dict.title')}}</v-list-item-title>
+          </template>
+      <v-list-item>
+     <v-list subheader>
+      <v-radio-group mandatory v-model="updateDefaultDict" :label="$t('settings.dict.description')">
+        <v-radio value="bm,nn" :label="$t('dicts.bm,nn')"></v-radio>
+        <v-radio value="bm" :label="$t('dicts.bm')"></v-radio>
+        <v-radio value="nn" :label="$t('dicts.nn')"></v-radio>
+      </v-radio-group>
+      </v-list></v-list-item>
+      </v-list-group>
+
+
+<v-list-group prepend-icon="settings">
+                 <template v-slot:activator>
+            <v-list-item-title>{{$t('settings.title')}}</v-list-item-title>
+          </template>
+
+    <v-list-item><Settings/></v-list-item>
+                
+              </v-list-group>
+              
+
+                          <v-list-item v-if="!$store.state.unavailable" v-on:click='$store.commit("resetStore")'>
+                <v-list-item-icon><v-icon>delete</v-icon></v-list-item-icon>
+                <v-list-item-title>{{$t("settings.reset")}}</v-list-item-title>
+
+              </v-list-item>
+
+                    <v-list-group prepend-icon="mail">
+                 <template v-slot:activator>
+            <v-list-item-title>{{$t('contact.title')}}</v-list-item-title>
+          </template>
+
+    <v-list-item><Contact @close="$emit('close')"/></v-list-item>
+                
+              </v-list-group>
+              
+                </v-list>
+
+            
+
+          </v-card>
+</template>
+
+<script>
+import Settings from './Settings.vue'
+import Help from './Help.vue'
+import Contact from './Contact.vue'
+
+export default {
+    name: "Menu",
+    components: {
+      Settings,
+      Help,
+      Contact
+    },
+    computed: {
+        updateLocale: {
+            get () { return this.$store.state.currentLocale}, 
+            set(value) {
+                this.$store.commit("setLocale", {value: value, i18n: this._i18n})
+                }
+        },
+        updateDefaultDict: {
+            get () { return this.$store.state.defaultDict}, 
+            set(value) {
+                this.$store.commit("setDefaultDict", value)
+                }
+        }
+    },
+}
+</script>