fix: added translation in UserDropdown Component

This commit is contained in:
Shariq Ansari 2024-04-10 16:15:34 +05:30
parent fc21e9b874
commit 4adada661c

View File

@ -1,29 +1,29 @@
<template> <template>
<Dropdown :options="userDropdownOptions"> <Dropdown :options="dropdownOptions">
<template v-slot="{ open }"> <template v-slot="{ open }">
<button <button
class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out" class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
:class=" :class="
isCollapsed isCollapsed
? 'px-0 w-auto' ? 'w-auto px-0'
: open : open
? 'bg-white shadow-sm px-2 w-52' ? 'w-52 bg-white px-2 shadow-sm'
: 'hover:bg-gray-200 px-2 w-52' : 'w-52 px-2 hover:bg-gray-200'
" "
> >
<CRMLogo class="w-8 h-8 rounded flex-shrink-0" /> <CRMLogo class="size-8 flex-shrink-0 rounded" />
<div <div
class="flex flex-1 flex-col text-left duration-300 ease-in-out" class="flex flex-1 flex-col text-left duration-300 ease-in-out"
:class=" :class="
isCollapsed isCollapsed
? 'opacity-0 ml-0 w-0 overflow-hidden' ? 'ml-0 w-0 overflow-hidden opacity-0'
: 'opacity-100 ml-2 w-auto' : 'ml-2 w-auto opacity-100'
" "
> >
<div class="text-base font-medium text-gray-900 leading-none"> <div class="text-base font-medium leading-none text-gray-900">
CRM {{ __('CRM') }}
</div> </div>
<div class="mt-1 text-sm text-gray-700 leading-none"> <div class="mt-1 text-sm leading-none text-gray-700">
{{ user.full_name }} {{ user.full_name }}
</div> </div>
</div> </div>
@ -31,11 +31,15 @@
class="duration-300 ease-in-out" class="duration-300 ease-in-out"
:class=" :class="
isCollapsed isCollapsed
? 'opacity-0 ml-0 w-0 overflow-hidden' ? 'ml-0 w-0 overflow-hidden opacity-0'
: 'opacity-100 ml-2 w-auto' : 'ml-2 w-auto opacity-100'
" "
> >
<FeatherIcon name="chevron-down" class="h-4 w-4 text-gray-600" aria-hidden="true" /> <FeatherIcon
name="chevron-down"
class="size-4 text-gray-600"
aria-hidden="true"
/>
</div> </div>
</button> </button>
</template> </template>
@ -47,7 +51,7 @@ import CRMLogo from '@/components/Icons/CRMLogo.vue'
import { sessionStore } from '@/stores/session' import { sessionStore } from '@/stores/session'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { Dropdown } from 'frappe-ui' import { Dropdown } from 'frappe-ui'
import { computed } from 'vue' import { computed, ref } from 'vue'
const props = defineProps({ const props = defineProps({
isCollapsed: { isCollapsed: {
@ -61,16 +65,16 @@ const { getUser } = usersStore()
const user = computed(() => getUser() || {}) const user = computed(() => getUser() || {})
const userDropdownOptions = [ let dropdownOptions = ref([
{ {
icon: 'corner-up-left', icon: 'corner-up-left',
label: 'Switch to Desk', label: computed(() => __('Switch to Desk')),
onClick: () => window.location.replace('/app'), onClick: () => window.location.replace('/app'),
}, },
{ {
icon: 'log-out', icon: 'log-out',
label: 'Log out', label: computed(() => __('Log out')),
onClick: () => logout.submit(), onClick: () => logout.submit(),
}, },
] ])
</script> </script>