From ae8d62958bdf0e61498a32d0a8e49bfddf338b6d Mon Sep 17 00:00:00 2001
From: Tai Groot <tai@taigrr.com>
Date: Mon, 26 Oct 2020 03:01:39 -0700
Subject: [PATCH] feat: adds support for vlayout config option

---
 src/App.vue                     |  3 ++-
 src/components/DarkMode.vue     |  4 ++--
 src/components/LayoutToggle.vue | 24 ++++++++++++++----------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3568c35..1397e73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,7 @@
         <DarkMode :isDark="this.isDark" @updated="isDark = $event" />
 
         <LayoutToggle
+          :vlayout="this.vlayout"
           @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
@@ -145,7 +146,7 @@ export default {
       offline: false,
       services: null,
       showMenu: false,
-      vlayout: true,
+      vlayout: null,
     };
   },
   created: async function () {
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 2eb1427..36fcb3f 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -13,7 +13,7 @@ export default {
   name: "Darkmode",
   props: ["isDark"],
   created: function () {
-    var isDark =
+    let isDark =
       "overrideDark" in localStorage
         ? JSON.parse(localStorage.overrideDark)
         : this.isDark === null
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     toggleTheme: function () {
-      var isDark = !this.isDark;
+      let isDark = !this.isDark;
       localStorage.overrideDark = isDark;
       this.$emit("updated", isDark);
     },
diff --git a/src/components/LayoutToggle.vue b/src/components/LayoutToggle.vue
index 7317f22..6c23e93 100644
--- a/src/components/LayoutToggle.vue
+++ b/src/components/LayoutToggle.vue
@@ -1,6 +1,6 @@
 <template>
-  <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
-    <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
+  <a v-on:click="toggleLayout()" class="navbar-item is-inline-block-mobile">
+    <span><i :class="['fas', 'fa-fw', vlayout ? icon : secondaryIcon]"></i></span>
     <slot></slot>
   </a>
 </template>
@@ -12,27 +12,31 @@ export default {
     name: String,
     icon: String,
     iconAlt: String,
+    vlayout: Boolean,
   },
   data: function () {
     return {
       secondaryIcon: null,
-      value: true,
     };
   },
   created: function () {
     this.secondaryIcon = this.iconAlt || this.icon;
-
+    let vlayout;
     if (this.name in localStorage) {
-      this.value = JSON.parse(localStorage[this.name]);
+      vlayout = JSON.parse(localStorage[this.name]);
+    } else {
+	vlayout = this.vlayout === null 
+        ? true 
+        : this.vlayout;
     }
 
-    this.$emit("updated", this.value);
+    this.$emit("updated", vlayout);
   },
   methods: {
-    toggleSetting: function () {
-      this.value = !this.value;
-      localStorage[this.name] = this.value;
-      this.$emit("updated", this.value);
+    toggleLayout: function () {
+      let vlayout = !this.vlayout;
+      localStorage[this.name] = vlayout;
+      this.$emit("updated", vlayout);
     },
   },
 };