mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 17:57:10 +00:00
fix: rearrange mini sidebar items
This commit is contained in:
Ramesh Mane
@@ -23,12 +23,25 @@ const { t } = useI18n()
|
||||
|
||||
const { isMobileMode } = useGlobal()
|
||||
|
||||
const { isChatWootEnabled } = useProvideChatwoot()
|
||||
|
||||
const { isModalVisible: isChatVisible } = useChatWoot()
|
||||
|
||||
const { navigateToFeed } = useWorkspace()
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const copyBtnRef = ref()
|
||||
|
||||
const toggleChatSupport = () => {
|
||||
if (!isChatVisible.value && !ncIsFunction(window.$chatwoot?.toggle)) {
|
||||
return
|
||||
}
|
||||
const toggleText = (isChatVisible.value ? 'hide' : 'show') as any
|
||||
window.$chatwoot.toggle(toggleText)
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const helpItems = computed<CategoryItemType[]>(() => {
|
||||
return [
|
||||
{
|
||||
@@ -86,6 +99,14 @@ const helpItems = computed<CategoryItemType[]>(() => {
|
||||
{
|
||||
category: t('general.contactSupport'),
|
||||
items: [
|
||||
{
|
||||
title: t('labels.chatWithNocoDBSupport'),
|
||||
icon: 'ncSupportAgent',
|
||||
e: 'c:nocodb:chat-support',
|
||||
link: '',
|
||||
onClick: toggleChatSupport,
|
||||
hidden: !isChatWootEnabled,
|
||||
},
|
||||
{
|
||||
title: 'support@nocodb.com',
|
||||
icon: 'ncMail',
|
||||
@@ -136,64 +157,88 @@ const openUrl = (item: ItemType) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="nc-mini-sidebar-btn-full-width">
|
||||
<NcDropdown v-model:visible="visible" :placement="isMobileMode ? 'topRight' : 'right'" overlay-class-name="!min-w-55">
|
||||
<div class="w-full py-1 flex items-center justify-center">
|
||||
<div
|
||||
class="nc-mini-sidebar-btn"
|
||||
:class="{
|
||||
hovered: visible,
|
||||
}"
|
||||
>
|
||||
<GeneralIcon icon="ncHelp" />
|
||||
</div>
|
||||
</div>
|
||||
<NcDropdown
|
||||
v-model:visible="visible"
|
||||
placement="rightBottom"
|
||||
overlay-class-name="!min-w-55 nc-help-menu-dropdown"
|
||||
:align="{ offset: [0, 3] }"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<template #overlay>
|
||||
<NcMenu variant="small">
|
||||
<template v-for="(category, idx) of helpItems" :key="idx">
|
||||
<template v-if="!category.hidden">
|
||||
<NcDivider v-if="idx !== 0" />
|
||||
<NcMenuItemLabel>
|
||||
<span class="normal-case">
|
||||
{{ category.category }}
|
||||
</span>
|
||||
</NcMenuItemLabel>
|
||||
<template #overlay>
|
||||
<NcMenu variant="small">
|
||||
<template v-for="(category, idx) of helpItems" :key="idx">
|
||||
<template v-if="!category.hidden">
|
||||
<NcDivider v-if="idx !== 0" />
|
||||
<NcMenuItemLabel>
|
||||
<span class="normal-case">
|
||||
{{ category.category }}
|
||||
</span>
|
||||
</NcMenuItemLabel>
|
||||
|
||||
<template v-for="(item, i) of category.items" :key="i">
|
||||
<template v-if="!item.hidden">
|
||||
<NcSubMenu v-if="item.subItems" class="py-0" variant="small">
|
||||
<template #title>
|
||||
<GeneralIcon v-if="item.icon" :icon="item.icon" class="h-4 w-4" />
|
||||
{{ item.title }}
|
||||
</template>
|
||||
<template v-for="(subItem, j) of item.subItems" :key="j">
|
||||
<NcMenuItem v-if="!subItem.hidden" @click="openUrl(subItem)">
|
||||
<GeneralIcon v-if="subItem.icon" :icon="subItem.icon" class="h-4 w-4" />
|
||||
{{ subItem.title }}
|
||||
</NcMenuItem>
|
||||
</template>
|
||||
</NcSubMenu>
|
||||
<NcTooltip v-else :title="item.tooltip" :disabled="!item.tooltip || isMobileMode" placement="top" hide-on-click>
|
||||
<NcMenuItem @click="openUrl(item)">
|
||||
<GeneralIcon v-if="item.icon" :icon="item.icon" class="h-4 w-4" />
|
||||
{{ item.title }}
|
||||
|
||||
<GeneralCopyButton
|
||||
v-if="item.copyBtn"
|
||||
ref="copyBtnRef"
|
||||
type="secondary"
|
||||
:content="item.title"
|
||||
:show-toast="false"
|
||||
/>
|
||||
<template v-for="(item, i) of category.items" :key="i">
|
||||
<template v-if="!item.hidden">
|
||||
<NcSubMenu v-if="item.subItems" class="py-0" variant="small">
|
||||
<template #title>
|
||||
<GeneralIcon v-if="item.icon" :icon="item.icon" class="h-4 w-4" />
|
||||
{{ item.title }}
|
||||
</template>
|
||||
<template v-for="(subItem, j) of item.subItems" :key="j">
|
||||
<NcMenuItem v-if="!subItem.hidden" @click="openUrl(subItem)">
|
||||
<GeneralIcon v-if="subItem.icon" :icon="subItem.icon" class="h-4 w-4" />
|
||||
{{ subItem.title }}
|
||||
</NcMenuItem>
|
||||
</NcTooltip>
|
||||
</template>
|
||||
</template>
|
||||
</NcSubMenu>
|
||||
<NcTooltip v-else :title="item.tooltip" :disabled="!item.tooltip || isMobileMode" placement="top" hide-on-click>
|
||||
<NcMenuItem @click="openUrl(item)">
|
||||
<GeneralIcon v-if="item.icon" :icon="item.icon" class="h-4 w-4" />
|
||||
{{ item.title }}
|
||||
|
||||
<GeneralCopyButton
|
||||
v-if="item.copyBtn"
|
||||
ref="copyBtnRef"
|
||||
type="secondary"
|
||||
:content="item.title"
|
||||
:show-toast="false"
|
||||
/>
|
||||
</NcMenuItem>
|
||||
</NcTooltip>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</NcMenu>
|
||||
</template>
|
||||
</NcDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</NcMenu>
|
||||
</template>
|
||||
</NcDropdown>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.nc-help-menu-dropdown.nc-help-menu-dropdown {
|
||||
overflow: visible !important;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
bottom: 13px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 7px solid var(--nc-border-gray-medium);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
bottom: 14px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid var(--nc-bg-default);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user