mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-30 02:32:29 +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>
115 lines
3.4 KiB
Vue
115 lines
3.4 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
|
|
import SidebarGroupSeparator from './SidebarGroupSeparator.vue';
|
|
import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
|
|
|
|
import { useSidebarContext } from './provider';
|
|
import { useEventListener } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
isExpanded: { type: Boolean, default: false },
|
|
label: { type: String, required: true },
|
|
icon: { type: [Object, String], required: true },
|
|
children: { type: Array, default: undefined },
|
|
activeChild: { type: Object, default: undefined },
|
|
});
|
|
|
|
const { isAllowed } = useSidebarContext();
|
|
const scrollableContainer = ref(null);
|
|
|
|
const accessibleItems = computed(() =>
|
|
props.children.filter(child => isAllowed(child.to))
|
|
);
|
|
|
|
const hasAccessibleItems = computed(() => {
|
|
if (props.children.length === 0) {
|
|
// cases like segment, folder and labels where users can create new items
|
|
return true;
|
|
}
|
|
|
|
return accessibleItems.value.length > 0;
|
|
});
|
|
|
|
const isScrollable = computed(() => {
|
|
return accessibleItems.value.length > 7;
|
|
});
|
|
|
|
const scrollEnd = ref(false);
|
|
|
|
// set scrollEnd to true when the scroll reaches the end
|
|
useEventListener(scrollableContainer, 'scroll', () => {
|
|
const { scrollHeight, scrollTop, clientHeight } = scrollableContainer.value;
|
|
scrollEnd.value = scrollHeight - scrollTop === clientHeight;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarGroupSeparator
|
|
v-if="hasAccessibleItems"
|
|
v-show="isExpanded"
|
|
:label
|
|
:icon
|
|
class="my-1"
|
|
/>
|
|
<ul class="m-0 list-none relative group">
|
|
<!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
|
|
which is 14rem. Then we add 16px so that we have some text visible from the next item -->
|
|
<div
|
|
ref="scrollableContainer"
|
|
:class="{
|
|
'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
|
|
}"
|
|
>
|
|
<template v-if="children.length">
|
|
<SidebarGroupLeaf
|
|
v-for="child in children"
|
|
v-show="isExpanded || activeChild?.name === child.name"
|
|
v-bind="child"
|
|
:key="child.name"
|
|
:active="activeChild?.name === child.name"
|
|
/>
|
|
</template>
|
|
<SidebarGroupEmptyLeaf v-else v-show="isExpanded" class="ml-3 rtl:mr-3" />
|
|
</div>
|
|
<div
|
|
v-if="isScrollable && isExpanded"
|
|
v-show="!scrollEnd"
|
|
class="absolute bg-gradient-to-t from-n-solid-2 w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="24"
|
|
viewBox="0 0 16 24"
|
|
fill="none"
|
|
class="text-n-slate-9 opacity-50 group-hover:opacity-100"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4 4L8 8L12 4"
|
|
stroke="currentColor"
|
|
opacity="0.5"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4 10L8 14L12 10"
|
|
stroke="currentColor"
|
|
opacity="0.75"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4 16L8 20L12 16"
|
|
stroke="currentColor"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</ul>
|
|
</template>
|