mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-25 07:24:51 +00:00
8505aa48c3
This PR updates the sidebar component to use a native <a> tag for the Help Center URL component. It also updates the build pipeline to use the esbuild options minifyIdentifiers and keepNames set to true.
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<script>
|
|
import Logo from './Logo.vue';
|
|
import PrimaryNavItem from './PrimaryNavItem.vue';
|
|
import OptionsMenu from './OptionsMenu.vue';
|
|
import AgentDetails from './AgentDetails.vue';
|
|
import NotificationBell from './NotificationBell.vue';
|
|
import wootConstants from 'dashboard/constants/globals';
|
|
import { frontendURL } from 'dashboard/helper/URLHelper';
|
|
import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
|
|
import { useTrack } from 'dashboard/composables';
|
|
|
|
export default {
|
|
components: {
|
|
Logo,
|
|
PrimaryNavItem,
|
|
OptionsMenu,
|
|
AgentDetails,
|
|
NotificationBell,
|
|
},
|
|
props: {
|
|
isACustomBrandedInstance: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
logoSource: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
installationName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
accountId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
menuItems: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
activeMenuItem: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
|
|
data() {
|
|
return {
|
|
helpDocsURL: wootConstants.DOCS_URL,
|
|
showOptionsMenu: false,
|
|
};
|
|
},
|
|
methods: {
|
|
frontendURL,
|
|
toggleOptions() {
|
|
this.showOptionsMenu = !this.showOptionsMenu;
|
|
},
|
|
toggleAccountModal() {
|
|
this.$emit('toggleAccounts');
|
|
},
|
|
toggleSupportChatWindow() {
|
|
window.$chatwoot.toggle();
|
|
},
|
|
openNotificationPanel() {
|
|
useTrack(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
|
|
this.$emit('openNotificationPanel');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<Logo
|
|
:source="logoSource"
|
|
:name="installationName"
|
|
:account-id="accountId"
|
|
class="m-4 mb-10"
|
|
/>
|
|
<PrimaryNavItem
|
|
v-for="menuItem in menuItems"
|
|
:key="menuItem.toState"
|
|
:icon="menuItem.icon"
|
|
:name="menuItem.label"
|
|
:to="menuItem.toState"
|
|
:is-child-menu-active="menuItem.key === activeMenuItem"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-end pb-6">
|
|
<a
|
|
v-if="!isACustomBrandedInstance"
|
|
v-tooltip.right="$t(`SIDEBAR.DOCS`)"
|
|
:href="helpDocsURL"
|
|
class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
|
|
rel="noopener noreferrer nofollow"
|
|
target="_blank"
|
|
>
|
|
<fluent-icon icon="book-open-globe" />
|
|
<span class="sr-only">{{ $t(`SIDEBAR.DOCS`) }}</span>
|
|
</a>
|
|
<NotificationBell @open-notification-panel="openNotificationPanel" />
|
|
<AgentDetails @toggle-menu="toggleOptions" />
|
|
<OptionsMenu
|
|
:show="showOptionsMenu"
|
|
@toggle-accounts="toggleAccountModal"
|
|
@show-support-chat-window="toggleSupportChatWindow"
|
|
@open-key-shortcut-modal="$emit('openKeyShortcutModal')"
|
|
@close="toggleOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|