From 5df1c906d0152b5f807de6da4cc92d2b87283c08 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 25 Apr 2021 10:36:40 -0800
Subject: [PATCH] fix open/close bug

---
 frontend/src/components/UI/TheAppBar.vue  |  2 +-
 frontend/src/components/UI/TheSidebar.vue | 29 ++++++-----------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/UI/TheAppBar.vue b/frontend/src/components/UI/TheAppBar.vue
index 22e5a6d3c..5404ae6d4 100644
--- a/frontend/src/components/UI/TheAppBar.vue
+++ b/frontend/src/components/UI/TheAppBar.vue
@@ -88,7 +88,7 @@ export default {
       this.$router.push(`/recipe/${slug}`);
     },
     openSidebar() {
-      this.$refs.theSidebar.forceOpen();
+      this.$refs.theSidebar.toggleSidebar();
     },
   },
 };
diff --git a/frontend/src/components/UI/TheSidebar.vue b/frontend/src/components/UI/TheSidebar.vue
index 9a0088b99..d96481556 100644
--- a/frontend/src/components/UI/TheSidebar.vue
+++ b/frontend/src/components/UI/TheSidebar.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
-    <v-navigation-drawer
-      :value="mobile ? showSidebar : true"
-      v-model="showSidebar"
-      width="180px"
-      clipped
-      app
-    >
+    <v-navigation-drawer v-model="showSidebar" width="180px" clipped app>
       <template v-slot:prepend>
         <v-list-item two-line v-if="isLoggedIn">
           <v-list-item-avatar color="accent" class="white--text">
@@ -84,7 +78,6 @@ export default {
   data() {
     return {
       showSidebar: false,
-      mobile: false,
       links: [],
 
       latestVersion: null,
@@ -211,6 +204,9 @@ export default {
     isLoggedIn() {
       return this.$store.getters.getIsLoggedIn;
     },
+    isMobile() {
+      return this.$vuetify.breakpoint.name === "xs";
+    },
   },
 
   methods: {
@@ -218,24 +214,13 @@ export default {
       this.hideImage == false;
     },
     resetView() {
-      this.mobile = this.viewScale();
-      this.showSidebar = !this.viewScale();
+      this.showSidebar = !this.isMobile;
     },
-    forceOpen() {
+    toggleSidebar() {
       this.showSidebar = !this.showSidebar;
     },
     closeSidebar() {
-      this.showSidebar = !this.showSidebar;
-    },
-    viewScale() {
-      switch (this.$vuetify.breakpoint.name) {
-        case "xs":
-          return true;
-        case "sm":
-          return true;
-        default:
-          return false;
-      }
+      this.showSidebar = false;
     },
     async getVersion() {
       let response = await axios.get(