opendesk

1<template>
2  <Dropdown :options="options">
3    <template #default="{ open }">
4      <button
5        class="flex h-12 items-center rounded-5 py-2 duration-300 ease-in-out"
6        :class="
7          collapsed
8            ? 'w-auto px-0'
9            : open
10            ? 'w-full px-2 bg-surface-base shadow-sm'
11            : 'w-full px-2 hover:bg-surface-gray-3'
12        "
13      >
14        <BrandLogo />
15        <div
16          class="flex flex-1 flex-col text-start duration-300 ease-in-out overflow-hidden rtl:items-start pe-2"
17          :class="
18            collapsed
19              ? 'ms-0 w-0 overflow-hidden opacity-0'
20              : 'ms-2 w-auto opacity-100'
21          "
22        >
23          <div class="text-base-medium leading-none text-ink-gray-9 truncate">
24            {{ config.brandName || "Opendesk" }}
25          </div>
26          <div class="mt-1 text-sm text-ink-gray-7">
27            {{ authStore.userName }}
28          </div>
29        </div>
30        <div
31          class="duration-300 ease-in-out"
32          :class="
33            collapsed
34              ? 'ms-0 w-0 overflow-hidden opacity-0'
35              : 'ms-2 relative start-[-2.5px] w-auto opacity-100'
36          "
37        >
38          <LucideChevronDown
39            class="h-4 w-4 text-ink-gray-5"
40            aria-hidden="true"
41          />
42        </div>
43      </button>
44    </template>
45  </Dropdown>
46</template>
47
48<script setup lang="ts">
49import LucideChevronDown from "~icons/lucide/chevron-down";
50import BrandLogo from "@/components/BrandLogo.vue";
51import { useAuthStore } from "@/stores/auth";
52import { useConfigStore } from "@/stores/config";
53import { useSidebarStore } from "@/stores/sidebar";
54import { Dropdown } from "frappe-ui";
55import { computed } from "vue";
56
57const config = useConfigStore();
58
59const props = defineProps({
60  options: {
61    type: Array,
62    required: true,
63  },
64  isCollapsed: {
65    type: Boolean,
66    default: null,
67  },
68});
69
70const authStore = useAuthStore();
71const sidebarStore = useSidebarStore();
72
73const collapsed = computed(() => props.isCollapsed ?? !sidebarStore.isExpanded);
74</script>
75