EmailLeftSidebarContent.vue

<script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore';
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';

const keycloakStore = useKeycloakStore();
// Gunakan computed agar selalu reaktif
const isAuthenticated = computed(() => keycloakStore.authenticated);

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<Props>()

defineEmits<{
  (e: 'toggleComposeDialogVisibility'): void
}>()

interface Props {
  emailsMeta: {
    inbox: number
    draft: number
    spam: number
    star: number
  }
}

interface Folder {
  title: string
  prependIcon: string
  to: any
  badge?: {
    content: string | number
    color: string
  }
}

interface Label {
  title: string
  color: string
  to: any
}

const inboxEmails = ref(0)
const draftEmails = ref(0)
const spamEmails = ref(0)
const starredEmails = ref(0)

watch(() => props.emailsMeta, emailsMeta => {
  if (!emailsMeta)
    return

  inboxEmails.value = emailsMeta.inbox
  draftEmails.value = emailsMeta.draft
  spamEmails.value = emailsMeta.spam
  starredEmails.value = emailsMeta.star
}, { immediate: true, deep: true })

const folders: ComputedRef<Folder[]> = computed(() => [
  {
    title: 'Inbox',
    prependIcon: 'ri-mail-line',
    to: { name: 'dstipro-email' },
    badge: { content: inboxEmails.value, color: 'primary' },
  },
  {
    title: 'Sent',
    prependIcon: 'ri-send-plane-line',
    to: {
      name: 'dstipro-email-filter',
      params: { filter: 'sent' },
    },
  },
  {
    title: 'Draft',
    prependIcon: 'ri-edit-box-line',
    to: {
      name: 'dstipro-email-filter',
      params: { filter: 'draft' },
    },
    badge: { content: draftEmails.value, color: 'warning' },
  },
  {
    title: 'Starred',
    prependIcon: 'ri-star-line',
    to: {
      name: 'dstipro-email-filter',
      params: { filter: 'starred' },
    },
    badge: { content: starredEmails.value, color: 'success' },
  },
  {
    title: 'Spam',
    prependIcon: 'ri-spam-2-line',
    to: {
      name: 'dstipro-email-filter',
      params: { filter: 'spam' },
    },
    badge: { content: spamEmails.value, color: 'error' },
  },
  {
    title: 'Trash',
    prependIcon: 'ri-delete-bin-7-line',
    to: {
      name: 'dstipro-email-filter',
      params: { filter: 'trashed' },
    },
  },
])

const labels: Label[] = [
  {
    title: 'Personal',
    color: 'success',
    to: {
      name: 'dstipro-email-label',
      params: { label: 'personal' },
    },
  },
  {
    title: 'Company',
    color: 'primary',
    to: {
      name: 'dstipro-email-label',
      params: { label: 'company' },
    },
  },
  {
    title: 'Important',
    color: 'warning',
    to: {
      name: 'dstipro-email-label',
      params: { label: 'important' },
    },
  },
  {
    title: 'Private',
    color: 'error',
    to: {
      name: 'dstipro-email-label',
      params: { label: 'private' },
    },
  },
]
</script>

<template>
  <div class="d-flex flex-column h-100">
    <VBtn v-if="isAuthenticated == false" class="bg-error ml-2 mt-5 mr-2 mb-2" prepend-icon="ri-user-follow-line">
      Not Connected
    </VBtn>
    <!-- 👉 Compose -->
    <div class="pa-5">
      <VBtn block @click="$emit('toggleComposeDialogVisibility')">
        Compose
      </VBtn>
    </div>

    <!-- 👉 Folders -->
    <PerfectScrollbar :options="{ wheelPropagation: false }" class="h-100 pt-4">
      <ul class="email-filters-labels">
        <RouterLink v-for="folder in folders" :key="folder.title" v-slot="{ isActive, href, navigate }"
          class="d-flex align-center cursor-pointer" :to="folder.to" custom>
          <li v-bind="$attrs" :href="href" :class="isActive && 'email-filter-active text-primary'"
            class="d-flex align-center cursor-pointer" @click="navigate">
            <VIcon :icon="folder.prependIcon" class="me-2" size="20" />
            <span>{{ folder.title }}</span>

            <VSpacer />

            <VChip v-if="folder.badge?.content" size="x-small" :color="folder.badge.color">
              {{ folder.badge.content }}
            </VChip>
          </li>
        </RouterLink>

        <!-- 👉 Labels -->
        <li class="text-sm d-block text-uppercase text-disabled mt-9 mb-4">
          LABELS
        </li>
        <RouterLink v-for="label in labels" :key="label.title" v-slot="{ isActive, href, navigate }"
          class="d-flex align-center" :to="label.to" custom>
          <li v-bind="$attrs" :href="href" :class="isActive && 'email-label-active text-primary'" class="cursor-pointer"
            @click="navigate">
            <VIcon :color="label.color" icon="ri-circle-fill" size="12" class="me-2" />
            <span>{{ label.title }}</span>
          </li>
        </RouterLink>
      </ul>
    </PerfectScrollbar>
  </div>
</template>

<style lang="scss">
.email-filters-labels {
  >li {
    position: relative;
    margin-block-end: 4px;
    padding-block: 4px;
    padding-inline: 20px;
  }

  .email-filter-active,
  .email-label-active {
    &::after {
      position: absolute;
      background: currentcolor;
      block-size: 100%;
      content: "";
      inline-size: 3px;
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }
}
</style>