fix: fix sidebar behaving weirdly (#48)

src/.vuepress/theme/client/composables/sidebar/useSidebar.ts

@@ -1,64 +1,48 @@
 import { ComputedRef, Ref, computed, ref, watch } from 'vue';
 import { useBreakpoints, useNavbarConfig } from '@mptheme/client/composables';
 import { MyPaResolvedSidebarItem } from '@mptheme/config.types';
+import { createGlobalState } from '@vueuse/core';
 import { useRoute } from 'vue-router';
 import { useSidebarItems } from './useSidebarItems';
 
-let isOpen: ComputedRef<boolean>;
-
-let toggled: Ref<boolean>;
-
 type UseSidebar = () => {
   exists: ComputedRef<boolean>;
   isNavbar: ComputedRef<boolean>;
-  isOpen: Ref<boolean>;
   items: ComputedRef<MyPaResolvedSidebarItem[]>;
   toggle: (bool?: boolean) => void;
   toggled: Ref<boolean>;
 };
 
+const useSidebarToggled = createGlobalState(() => ref(false));
+
 export const useSidebar: UseSidebar = () => {
+  const toggled = useSidebarToggled();
   const route = useRoute();
   const items = useSidebarItems();
   const navbar = useNavbarConfig();
   const { lg } = useBreakpoints();
-  const isNavbar = computed(() => !items.value.length);
-
-  toggled ??= ref(false);
 
-  isOpen ??= computed(() => {
-    const renderByView = lg.value && !isNavbar.value;
-
-    return exists.value && (renderByView || toggled.value);
-  });
+  const isNavbar = computed(() => !items.value.length);
 
   const sidebarItems = computed(() => {
-    if (!items.value.length) {
-      return navbar.value;
-    }
-
-    return items.value;
-  });
-
-  const exists = computed(() => {
-    return (sidebarItems.value?.length ?? 0) > 0;
+    return items.value.length ? items.value : navbar.value;
   });
 
+  const exists = computed(() => (sidebarItems.value?.length ?? 0) > 0);
   const toggle = (bool?: boolean): void => {
     toggled.value = bool ?? !toggled.value;
   };
 
   watch(
-    () => route.path,
+    [() => route.path, lg],
     () => toggle(false),
   );
 
   return {
-    items: sidebarItems,
-    isOpen,
-    isNavbar,
     exists,
-    toggled,
+    isNavbar,
+    items: sidebarItems,
     toggle,
+    toggled,
   };
 };

src/.vuepress/theme/client/views/layout/header/toggle-sidebar-button/ToggleSidebarButton.vue

@@ -1,74 +1,46 @@
 <template>
   <div
-    v-if="hasSidebar"
+    v-if="exists"
     class="cursor-pointer flex lg:hidden p-3"
     :title="translate('toggleSidebar')"
     :aria-label="translate('toggleSidebar')"
     aria-expanded="false"
     role="button"
     tabindex="0"
-    @click="toggle">
+    @click="() => toggle()">
     <div
+      role="none"
       class="flex flex-col h-6 items-center justify-around w-6"
       aria-hidden="true"
       tabindex="-1">
       <span
-        :class="[
-          burgerClasses,
-          {
-            '-rotate-45 translate-y-2': toggled,
-          },
-        ]" />
+        role="none"
+        :class="[burgerClasses, { '-rotate-45 translate-y-2': toggled }]" />
       <span
-        :class="[
-          burgerClasses,
-          {
-            'scale-x-0': toggled,
-          },
-        ]" />
+        role="none"
+        :class="[burgerClasses, { 'scale-x-0': toggled }]" />
       <span
-        :class="[
-          burgerClasses,
-          {
-            'rotate-45 -translate-y-2': toggled,
-          },
-        ]" />
+        role="none"
+        :class="[burgerClasses, { 'rotate-45 -translate-y-2': toggled }]" />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { useSidebar, useSiteLocaleData, useTranslate } from '@mptheme/client/composables';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { useSidebar, useTranslate } from '../../../../composables';
 
-export default defineComponent({
-  name: 'ToggleSidebarButton',
-  emits: ['toggle'],
-  setup: (props, ctx) => {
-    const sidebar = useSidebar();
-    const translate = useTranslate();
+const { toggled, toggle, exists } = useSidebar();
 
-    return {
-      translate,
-      toggled: sidebar.isOpen,
-      hasSidebar: sidebar.exists,
+const translate = useTranslate();
 
-      toggle() {
-        sidebar.toggle();
-        ctx.emit('toggle');
-      },
-
-      burgerClasses: [
-        'bg-black',
-        'dark:bg-white',
-        'duration-100',
-        'h-0.5',
-        'inline-block',
-        'rounded-lg',
-        'transition-transform',
-        'w-full',
-      ],
-    };
-  },
-});
+const burgerClasses = [
+  'bg-black',
+  'dark:bg-white',
+  'duration-100',
+  'h-0.5',
+  'inline-block',
+  'rounded-lg',
+  'transition-transform',
+  'w-full',
+];
 </script>

src/.vuepress/theme/client/views/layout/sidebar/MPSidebar.vue

@@ -2,12 +2,12 @@
   <aside
     v-if="exists"
     ref="sidebar"
-    class="fixed h-full sidebar transition-all w-80 z-30"
+    class="fixed h-full lg:translate-x-0 sidebar w-80 z-30"
     :class="{
+      'transition-all': isMounted,
       'ds__ignore': isNavbar,
-      '-translate-x-full': !isOpen,
-      'xl:translate-x-0': !isOpen && !isNavbar,
-      'translate-x-0': isOpen,
+      'lg:translate-x-0': toggled,
+      '-translate-x-full': !toggled,
     }">
     <ContentBlock
       :variant="['border-right', 'dark']"
@@ -29,6 +29,7 @@
 import { onMounted, ref, watch } from 'vue';
 import ContentBlock from '@mptheme/client/views/layout/content-block/ContentBlock.vue';
 import SidebarItems from '@mptheme/client/views/layout/sidebar/sidebar-items/SidebarItems.vue';
+import { useMounted } from '@vueuse/core';
 import { useRoute } from 'vue-router';
 import { useSidebar } from '../../../composables';
 
@@ -65,5 +66,7 @@ onMounted(() => {
   scrollIntoView();
 });
 
-const { toggle, isOpen, exists, toggled, isNavbar } = useSidebar();
+const isMounted = useMounted();
+
+const { toggle, exists, toggled, isNavbar } = useSidebar();
 </script>

src/.vuepress/theme/client/views/page/page-container/PageContainer.vue

@@ -2,22 +2,17 @@
   <div
     class="min-h-full"
     :class="{
-      'lg:pl-80': isOpen,
+      'lg:pl-80': sidebar.exists,
+      'transition-all': isMounted,
     }">
     <slot />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useSidebar } from '@mptheme/client/composables';
+<script lang="ts" setup>
+import { useMounted } from '@vueuse/core';
+import { useSidebar } from '../../../composables';
 
-export default defineComponent({
-  name: 'PageContainer',
-  setup: () => {
-    const { isOpen } = useSidebar();
-
-    return { isOpen };
-  },
-});
+const sidebar = useSidebar();
+const isMounted = useMounted();
 </script>