Add functionality to copy buttons

src/components/ArticleFooter.vue

 <template>
   <div class="article_footer">
-      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">        
+      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">        
         <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span>
       </v-btn>
 
       <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
         <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span>
       </v-btn>
-            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
+      <v-menu :close-on-content-click=false max-width="500px" rounded="0" v-model="menu">
+        <template v-slot:activator="{ on, attrs }">
+            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
         <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
       </v-btn>
+
+        </template>
+        <v-card rounded="0" class="info-card">
+          {{{"nob": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
+                         "bob": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/>
+          <span class = "highlighted">{{this.create_citation()}}</span>
+          <v-btn fixed depressed x-small class="toolbar-button" rounded tabindex="0" @click="copy_citation">
+            
+            <v-icon x-small icon>content_copy</v-icon> Kopier
+          </v-btn>
+        </v-card>
+      </v-menu>
   </div>
 </template>
 
 <script>
+const host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
+
 export default {
   name: 'ArticleFooter',
   props: {
@@ -26,10 +42,12 @@ export default {
     hasPointer() {
       return window.matchMedia('(hover: hover) and (pointer: fine)').matches
     },
-    share_link: function() {
-      let host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
-      return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
+  },
+  data: function() {
+    return {
+      menu: false
     }
+
   },
   methods: {
     shareViaWebShare() {
@@ -38,7 +56,28 @@ export default {
         text: "",
         url: "/" + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
       })
+    },
+    create_link() {
+      return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
+    },
+    create_citation() {
+      let date = new Date();
+      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
+      let mm = (date.getMonth() < 10? '0' : '') + date.getMonth()
+      let yyyy = date.getFullYear()
+      let citation = `«${this.article.lemmas[0].lemma}». I: ${{"bob": "Bokmålsordboka", "nob": "Nynorskordboka"}[this.article.dictionary]}. Språkrådet og Universitetet i Bergen. <${this.create_link()}> (hentet ${dd}.${mm}.${yyyy}).`
+      return citation
+    },
+    copy_link() {
+      navigator.clipboard.writeText(this.create_link());
+    },
+
+    copy_citation() {
+      let citation = this.create_citation()
+      navigator.clipboard.writeText(citation);
+      this.menu = false
     }
+    
   }
 }