Custom accordion for inflection table

src/components/Header.vue

@@ -30,13 +30,21 @@
             <v-btn depressed small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
         <v-icon small>format_quote</v-icon>
       </v-btn>-->
-    <v-btn class="show-inflection" rounded depressed small >Vis bøying &nbsp;&#9662;</v-btn>
+    
+    <div v-if="inflected">
+    <v-btn class="show-inflection" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
+    <span v-bind:class="[{open:inflection_expanded}, dictionary]">bøyning</span>
+    </v-btn>
+      <div class="inflection-canvas" v-if="inflection_expanded">
+        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
+      </div>
+
+    </div>
+
     <!--
     <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
       <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary>
-      <div class="inflection-canvas">
-        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
-      </div>
+
     </details>-->
 </div>
   
@@ -114,15 +122,19 @@ export default {
   data: function() {
     return {
       inflect_reported: false,
-      menu: false
+      menu: false,
+      inflection_expanded: false
     }
   },
   methods: {
     toggle: function() {
+      this.inflection_expanded = !this.inflection_expanded
+      console.log(this.inflection_expanded)
       if (! this.inflect_reported) {
         this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
       }
       this.inflect_reported = true
+      
     }
   }
 }
@@ -207,36 +219,37 @@ article h2.secondary_header {
   box-shadow: 2px 2px 0px var(--v-primary-base)
 }
 
-.header details > summary:after {
-  content: "⌄";
-  font-weight: bold;
-  position: absolute;
-  right: 0;
-  top: 1px;
-  margin-right: 3px;
-}
 
-.header details > summary.bob:before {
+.show-inflection .bob:before {
   content: "Se ";
 }
 
-.header details > summary.nob:before {
+.show-inflection .nob:before {
   content: "Sjå ";
 }
 
-.header details[open] > summary.bob:before, details[open] > summary.nob:before {
+.show-inflection .open.bob:before, .show-inflection .open.nob:before  {
   content: "Skjul  ";
 }
 
-.header details[open] > summary:after {
-  content: "⌃";
+.show-inflection .bob:after, .show-inflection .nob:after {
+  content: "▾";
   font-weight: bold;
-  position: absolute;
   right: 0;
   top: 8px;
-  margin-right: 3px;
+  margin-left: 6px;;
+}
+
+
+.show-inflection .open:after {
+  content: "▴";
+  font-weight: bold;
+  right: 0;
+  top: 1px;
+  margin-left: 6px;
 }
 
+
 @keyframes open {
   0% {
     opacity: 0;
@@ -264,9 +277,10 @@ article h2.secondary_header {
 }
 
 .infl-wrapper {
-  color: var(--v-primary-base);
+  color: var(--v-text-base);
   width: min-content;
   font-size: 14px;
+  overflow-x: auto;
 }
 
 .show-inflection {
@@ -294,8 +308,8 @@ th, td {
 }
 
 th {
-  background-color: var(--v-tertiary-darken1);
-  color: var(--v-primary-darken1);
+  background-color: var(--v-button-base);
+  color: var(--v-primary-darken1)
 }
 
 .infl-label {

src/plugins/vuetify.js

@@ -59,6 +59,7 @@ export default new Vuetify({
         anchor: '#880E4F',
         error: '#FDF4F5',
         border: '#9E9E9E',
+        button: '#f5f5f5',
         text: '#000000'
       }
     }