opendesk

1import { useStorage } from "@vueuse/core";
2import { defineStore } from "pinia";
3import { computed, ref } from "vue";
4
5export const useSidebarStore = defineStore("sidebar", () => {
6  const isOpen = ref(true);
7  const isExpanded = useStorage("sidebar_is_expanded", true);
8  // Match frappe-ui Sidebar's width/collapsedWidth props (15rem/3rem),
9  // since the notifications panel anchors against this value.
10  const width = computed(() => {
11    return isExpanded.value ? "15rem" : "3rem";
12  });
13
14  function toggle(state?: boolean) {
15    isOpen.value = state ?? !isOpen.value;
16  }
17
18  function toggleExpanded(state?: boolean) {
19    isExpanded.value = state ?? !isExpanded.value;
20  }
21
22  return {
23    isExpanded,
24    isOpen,
25    toggle,
26    toggleExpanded,
27    width,
28  };
29});
30