mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-29 02:02:27 +00:00
6d3ecfe3c1
This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes - Components in the `layouts-next` and `base-next` directories in `dashboard/components` - Two generic components `Avatar` and `Icon` - `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions. - `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication. - `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state. - `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header) - `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups. ---- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<script setup>
|
|
import { useAccount } from 'dashboard/composables/useAccount';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import { useToggle } from '@vueuse/core';
|
|
import { useI18n } from 'vue-i18n';
|
|
import ButtonNext from 'next/button/Button.vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
|
|
const emit = defineEmits(['showCreateAccountModal']);
|
|
|
|
const { t } = useI18n();
|
|
const { accountId, currentAccount } = useAccount();
|
|
const currentUser = useMapGetter('getCurrentUser');
|
|
const globalConfig = useMapGetter('globalConfig/get');
|
|
const [showDropdown, toggleDropdown] = useToggle(false);
|
|
|
|
const close = () => {
|
|
if (showDropdown.value) {
|
|
toggleDropdown(false);
|
|
}
|
|
};
|
|
|
|
const onChangeAccount = newId => {
|
|
const accountUrl = `/app/accounts/${newId}/dashboard`;
|
|
window.location.href = accountUrl;
|
|
};
|
|
|
|
const emitNewAccount = () => {
|
|
close();
|
|
emit('showCreateAccountModal');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative z-20">
|
|
<button
|
|
id="sidebar-account-switcher"
|
|
:data-account-id="accountId"
|
|
aria-haspopup="listbox"
|
|
aria-controls="account-options"
|
|
class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
|
|
:class="{ 'bg-n-alpha-1': showDropdown }"
|
|
@click="toggleDropdown()"
|
|
>
|
|
<span
|
|
class="text-sm font-medium leading-5 text-n-slate-12 truncate"
|
|
aria-live="polite"
|
|
>
|
|
{{ currentAccount.name }}
|
|
</span>
|
|
|
|
<span
|
|
aria-hidden="true"
|
|
class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
|
|
/>
|
|
</button>
|
|
<div v-if="showDropdown" v-on-clickaway="close" class="absolute top-8 z-50">
|
|
<div
|
|
class="w-72 text-sm block bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
|
|
>
|
|
<div
|
|
class="px-4 pt-3 pb-2 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
|
|
>
|
|
{{ t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
|
|
</div>
|
|
<div class="px-1 gap-1 grid">
|
|
<button
|
|
v-for="account in currentUser.accounts"
|
|
:id="`account-${account.id}`"
|
|
:key="account.id"
|
|
class="flex w-full hover:bg-n-alpha-1 space-x-4"
|
|
@click="onChangeAccount(account.id)"
|
|
>
|
|
<div
|
|
:for="account.name"
|
|
class="text-left rtl:text-right flex gap-2"
|
|
>
|
|
<span class="text-n-slate-12">
|
|
{{ account.name }}
|
|
</span>
|
|
<span class="text-n-slate-11 capitalize">
|
|
{{
|
|
account.custom_role_id
|
|
? account.custom_role.name
|
|
: account.role
|
|
}}
|
|
</span>
|
|
</div>
|
|
<Icon
|
|
v-show="account.id === accountId"
|
|
icon="i-lucide-check"
|
|
class="text-n-teal-11 size-5"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div class="px-2 mt-2 pb-2">
|
|
<ButtonNext
|
|
v-if="globalConfig.createNewAccountFromDashboard"
|
|
variant="secondary"
|
|
class="w-full"
|
|
size="sm"
|
|
@click="emitNewAccount"
|
|
>
|
|
{{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
|
|
</ButtonNext>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|