adapted components to pinia

src/components/MenuRow.vue

@@ -10,66 +10,66 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: "MenuRow",
-  props: {
-    rowTitle: {
-      type: String,
-      default: "",
+  import { mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
+  
+  export default {
+    name: "MenuRow",
+    props: {
+      rowTitle: {
+        type: String,
+        default: "",
+      },
     },
-  },
-  computed: {
-    ...mapGetters({
-      activeMenu: "getActiveMenu",
-    }),
-  },
-  methods: {
-    updateActiveMenu(event) {
-      const elem = event.target;
-      const value = elem.id;
-      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
-      else this.$store.commit("setActiveMenu", value);
+    computed: {
+      // TODO: should be passed as a props/slot, not in a store
+      ...mapWritableState(globalStore, ["activeMenu"])
     },
-  },
-};
+    methods: {
+      updateActiveMenu(event) {
+        const elem = event.target;
+        const value = elem.id;
+        if (value == this.activeMenu) this.activeMenu = ""
+        else this.activeMenu = value
+      },
+    },
+  };
 </script>
 
 <style>
-.menu-row h2 {
-  font-size: medium;
-  padding: 10px;
-  cursor: pointer;
-  border: 2px solid darkgrey;
-  margin: 0 0 10px 0;
-}
+  .menu-row h2 {
+    font-size: medium;
+    padding: 10px;
+    cursor: pointer;
+    border: 2px solid darkgrey;
+    margin: 0 0 10px 0;
+  }
 
-select {
-  margin-top: 10px;
-  padding: 5px;
-}
+  select {
+    margin-top: 10px;
+    padding: 5px;
+  }
 
-input[type="button"] {
-  min-width: 60px;
-  padding: 5px;
-  font-weight: bold;
-  margin-right: 10px;
-}
+  input[type="button"] {
+    min-width: 60px;
+    padding: 5px;
+    font-weight: bold;
+    margin-right: 10px;
+  }
 
-.form-field {
-  display: flex;
-  margin: 10px;
-  justify-content: space-between;
-}
+  .form-field {
+    display: flex;
+    margin: 10px;
+    justify-content: space-between;
+  }
 
-.menu-row {
-  flex: 1;
-}
+  .menu-row {
+    flex: 1;
+  }
 
-label,
-.form-field label {
-  margin-right: 10px;
-  font-weight: bold;
-}
+  label,
+  .form-field label {
+    margin-right: 10px;
+    font-weight: bold;
+  }
 </style>