refactor: convert sidebar toggler to use ref

src/components/PageHeader.vue

@@ -8,9 +8,9 @@
   >
     <Transition name="spacer">
       <div
-        v-if="!sidebar && platform === 'Mac' && languageDirection !== 'rtl'"
+        v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
         class="h-full"
-        :class="sidebar ? '' : 'w-tl me-4 border-e'"
+        :class="showSidebar ? '' : 'w-tl me-4 border-e'"
       />
     </Transition>
     <h1 class="text-xl font-semibold select-none" v-if="title">
@@ -31,12 +31,13 @@
   </div>
 </template>
 <script>
+import { showSidebar } from 'src/utils/refs';
 import { Transition } from 'vue';
 import BackLink from './BackLink.vue';
 import SearchBar from './SearchBar.vue';
 
 export default {
-  inject: ['sidebar', 'languageDirection'],
+  inject: ['languageDirection'],
   props: {
     title: { type: String, default: '' },
     backLink: { type: Boolean, default: true },
@@ -45,6 +46,9 @@ export default {
     searchborder: { type: Boolean, default: true },
   },
   components: { SearchBar, BackLink, Transition },
+  setup() {
+    return { showSidebar };
+  },
   computed: {
     showBorder() {
       return !!this.$slots.default && this.searchborder;

src/components/Sidebar.vue

@@ -165,7 +165,7 @@
         m-4
         rtl-rotate-180
       "
-      @click="$emit('toggle-sidebar')"
+      @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-left" class="w-4 h-4" />
     </button>
@@ -182,7 +182,7 @@ import { fyo } from 'src/initFyo';
 import { openLink } from 'src/utils/ipcCalls';
 import { docsPathRef } from 'src/utils/refs';
 import { getSidebarConfig } from 'src/utils/sidebarConfig';
-import { routeTo } from 'src/utils/ui';
+import { routeTo, toggleSidebar } from 'src/utils/ui';
 import router from '../router';
 import Icon from './Icon.vue';
 import Modal from './Modal.vue';
@@ -191,7 +191,7 @@ import ShortcutsHelper from './ShortcutsHelper.vue';
 export default {
   components: [Button],
   inject: ['languageDirection', 'shortcuts'],
-  emits: ['change-db-file', 'toggle-sidebar'],
+  emits: ['change-db-file'],
   data() {
     return {
       companyName: '',
@@ -222,7 +222,7 @@ export default {
 
     this.shortcuts.shift.set(['KeyH'], () => {
       if (document.body === document.activeElement) {
-        this.$emit('toggle-sidebar');
+        this.toggleSidebar();
       }
     });
     this.shortcuts.set(['F1'], () => this.openDocumentation());
@@ -234,6 +234,7 @@ export default {
   methods: {
     routeTo,
     reportIssue,
+    toggleSidebar,
     openDocumentation() {
       openLink('https://docs.frappebooks.com/' + docsPathRef.value);
     },

src/pages/Desk.vue

@@ -1,11 +1,14 @@
+<script setup lang="ts">
+import { showSidebar } from 'src/utils/refs';
+import { toggleSidebar } from 'src/utils/ui';
+</script>
 <template>
   <div class="flex overflow-hidden">
     <Transition name="sidebar">
       <Sidebar
-        v-show="sidebar"
+        v-show="showSidebar"
         class="flex-shrink-0 border-e whitespace-nowrap w-sidebar"
         @change-db-file="$emit('change-db-file')"
-        @toggle-sidebar="sidebar = !sidebar"
       />
     </Transition>
 
@@ -32,7 +35,7 @@
 
     <!-- Show Sidebar Button -->
     <button
-      v-show="!sidebar"
+      v-show="!showSidebar"
       class="
         absolute
         bottom-0
@@ -45,29 +48,22 @@
         m-4
         hover:opacity-100 hover:shadow-md
       "
-
-      @click="sidebar = !sidebar"
+      @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-right" class="w-4 h-4" />
     </button>
   </div>
 </template>
-<script>
-import { computed } from '@vue/reactivity';
+<script lang="ts">
+import { defineComponent } from 'vue';
 import Sidebar from '../components/Sidebar.vue';
-export default {
+export default defineComponent({
   name: 'Desk',
   emits: ['change-db-file'],
-  data() {
-    return { sidebar: true };
-  },
-  provide() {
-    return { sidebar: computed(() => this.sidebar) };
-  },
   components: {
     Sidebar,
   },
-};
+});
 </script>
 
 <style scoped>

src/utils/refs.ts

@@ -1,6 +1,7 @@
 import { reactive, ref } from 'vue';
 import { FocusedDocContextSet } from './misc';
 
+export const showSidebar = ref(true);
 export const docsPathRef = ref<string>('');
 export const systemLanguageRef = ref<string>('');
 export const focusedDocsRef = reactive<FocusedDocContextSet>(

src/utils/ui.ts

@@ -18,6 +18,7 @@ import { App, createApp, h } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { stringifyCircular } from './';
 import { evaluateHidden } from './doc';
+import { showSidebar } from './refs';
 import {
   ActionGroup,
   MessageDialogOptions,
@@ -467,3 +468,11 @@ export async function isPrintable(schemaName: string) {
   });
   return numTemplates > 0;
 }
+
+export function toggleSidebar(value?: boolean) {
+  if (typeof value !== 'boolean') {
+    value = !showSidebar.value;
+  }
+
+  showSidebar.value = value;
+}