jws-frontend/src/components/DrawerComponent.vue

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { Icon } from '@iconify/vue';
import useMyBranch from 'stores/my-branch';
import { getUserId, getRole } from 'src/services/keycloak';

defineProps<{
  mini?: boolean;
}>();

onMounted(async () => {
  const uid = getUserId();
  const role = getRole();

  if (!uid) return;

  if (role?.includes('system')) {
    const result = await userBranch.fetchListOptionBranch();
    if (result && result.total > 0) currentMyBranch.value = result.result[0];
  }
  const result = await userBranch.fetchListMyBranch(uid);
  if (result && result.total > 0) currentMyBranch.value = result.result[0];
});

const router = useRouter();
const userBranch = useMyBranch();
const { currentMyBranch } = storeToRefs(userBranch);

const currentRoute = ref<string>('');
const currentPath = computed(() => {
  return router.currentRoute.value.path;
});

const labelMenu = ref<
  {
    label: string;
    icon: string;
    route: string;
    disabled?: boolean;
    isax?: boolean;
  }[]
>([
  {
    label: 'drawerDashboard',
    icon: 'isax-element-35',
    route: '',
    isax: true,
    disabled: true,
  },
  {
    label: 'drawerBranchManagement',
    icon: 'mdi-chart-donut',
    route: '/branch-management',
  },
  {
    label: 'drawerPersonnelManagement',
    icon: 'isax-frame5',
    route: '/personnel-management',
    isax: true,
  },
  {
    label: 'drawerCustomerManagement',
    icon: 'isax-frame5',
    route: '/customer-management',
    isax: true,
  },
  {
    label: 'drawerProductsAndServices',
    icon: 'heroicons-truck-solid',
    route: '/product-service',
  },
  {
    label: 'drawerQuotation',
    icon: 'mdi-file-document',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerRequestList',
    icon: 'isax-device-message5',
    route: '',
    disabled: true,
    isax: true,
  },
  {
    label: 'drawerWorkOrder',
    icon: 'isax-receipt-2-15',
    route: '',
    disabled: true,
    isax: true,
  },
  {
    label: 'drawerInvoice',
    icon: 'material-symbols:box',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerAccountingLedger',
    icon: 'isax-dollar-circle4',
    route: '',
    isax: true,
    disabled: true,
  },
  {
    label: 'drawerReport',
    icon: 'mdi-file-document',
    route: '',
    disabled: true,
  },
]);

const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
  default: true,
});

function navigateTo(label: string, destination: string) {
  currentRoute.value = label;
  router.push(`${destination}`);
}

function branchSetting() {}
</script>

<template>
  <!-- Drawer -->
  <q-drawer
    no-swipe-open
    v-model="leftDrawerOpen"
    side="left"
    :breakpoint="599"
    class="column justify-between no-wrap"
    :class="{ dark: $q.dark.isActive }"
    :width="mini ? 80 : 256"
    show-if-above
  >
    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
    <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
      <div
        class="flex justify-center items-center q-pl-sm cursor-pointer"
        @click="$router.push('/')"
        id="btn-drawer-home"
        style="height: 128px"
      >
        <q-img
          fit="contain"
          :src="mini ? 'logo_jws.png' : '/logo.png'"
          :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
          style="height: 64px"
        />
      </div>

      <div id="drawer-menu" class="q-pl-md q-mr-xs">
        <q-item
          v-for="v in labelMenu"
          dense
          clickable
          class="row items-center q-my-xs q-px-xs"
          :key="v.label"
          :disable="!!v.disabled"
          :class="{
            active: currentPath === v.route,
            'border-active': currentPath === v.route,
            dark: $q.dark.isActive,
          }"
          @click="navigateTo(v.label, v.route)"
        >
          <div class="row justify-center items-center">
            <i
              v-if="v.isax"
              :class="`isax ${v.icon}`"
              style="font-size: 24px"
            />
            <Icon v-else :icon="v.icon" width="24px" />
            <q-tooltip v-if="mini">
              {{ $t(v.label) }}
            </q-tooltip>
          </div>

          <div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
            {{ $t(v.label) }}
          </div>
        </q-item>
      </div>
    </div>

    <div
      class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
      :class="{ 'justify-center': mini }"
      style="min-height: 56px; overflow-x: hidden"
    >
      <q-avatar
        text-color="white"
        size="md"
        :style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
        class="relative-position"
      >
        <q-icon
          name="mdi-home-group"
          size="sm"
          :style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
        />
        <div class="dot absolute-bottom-right" />
      </q-avatar>

      <div
        v-if="!mini"
        class="text-caption column q-ml-sm"
        style="white-space: nowrap"
      >
        <span class="text-weight-bold">
          {{
            ($i18n.locale === 'en-US'
              ? currentMyBranch?.nameEN
              : currentMyBranch?.name) ?? '-'
          }}
        </span>
        <span>
          {{ currentMyBranch?.code ?? '-' }}
        </span>
      </div>

      <q-btn
        v-if="!mini"
        dense
        flat
        rounded
        icon="mdi-cog-outline"
        size="sm"
        @click="branchSetting"
        style="margin-left: auto"
      />
    </div>
  </q-drawer>
</template>

<style lang="scss" scoped>
#drawer-menu :deep(.q-item) {
  color: var(--gray-7);
  border-radius: var(--radius-2);

  &.dark {
    color: var(--gray-3);
  }
}

#drawer-menu :deep(.q-item.active) {
  --_drawer-item-background-color: var(--brand-1) !important;
  background-color: var(--_drawer-item-background-color);
  color: white;

  // border-left: 10px solid $secondary;
}

#drawer-menu :deep(.q-item.active)::before {
  display: block;
  position: absolute;
  content: ' ';
  background: var(--brand-2);
  border-radius: 99rem;
  width: 6px;
  left: -0.6rem;
  top: 18%;
  bottom: 18%;
  cursor: context-menu;
}

:deep(.q-drawer) {
  transition: 0.1s width ease-in-out;
  background-color: transparent;
  padding: var(--size-4);
  padding-right: 0;
}

:deep(.q-drawer__content) {
  border-radius: var(--radius-2);
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(11.2px);
  -webkit-backdrop-filter: blur(11.2px);

  &.dark {
    background-color: hsla(var(--gray-10-hsl) / 0.5);
  }
}

.dot {
  height: 10px;
  width: 10px;
  background-color: var(--teal-6);
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid white;
}
</style>