Save collapsed sections to state

When you refresh or navigate to a new page and back, your collapsed sections will be as you set them.

components/section.vue

@@ -6,10 +6,13 @@
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="material-icons">
-        {{ isCollapsed ? "expand_more" : "expand_less" }}
+        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
-    <div class="collapsible" :class="{ hidden: collapsed }">
+    <div
+      class="collapsible"
+      :class="{ hidden: isCollapsed(label.toLowerCase()) }"
+    >
       <slot />
     </div>
   </fieldset>
@@ -26,15 +29,12 @@ export default {
   computed: {
     frameColorsEnabled() {
       return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
+    },
+    sectionString() {
+      return `${this.$route.path}/${this.label}`;
     }
   },
 
-  data() {
-    return {
-      isCollapsed: false
-    };
-  },
-
   props: {
     label: {
       type: String,
@@ -49,7 +49,15 @@ export default {
     collapse({ target }) {
       const parent = target.parentNode.parentNode;
       parent.querySelector(".collapsible").classList.toggle("hidden");
-      this.isCollapsed = !this.isCollapsed;
+      // Save collapsed section to local state
+      this.$store.commit("setCollapsedSection", this.sectionString);
+    },
+    isCollapsed(label) {
+      return (
+        this.$store.state.theme.collapsedSections.includes(
+          this.sectionString
+        ) || false
+      );
     }
   }
 };