jws-frontend/src/components/DrawerComponent.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Icon } from '@iconify/vue';

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

const router = useRouter();

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

const labelMenu = ref<
  { label: string; icon: string; route: string; disabled?: boolean }[]
>([
  {
    label: 'drawerDashboard',
    icon: 'mage:dashboard',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerBranchManagement',
    icon: 'mdi-sitemap-outline',
    route: '/branch-management',
  },
  {
    label: 'drawerPersonnelManagement',
    icon: 'mdi:account-settings-outline',
    route: '/personnel-management',
  },
  {
    label: 'drawerCustomerManagement',
    icon: 'mdi-account-settings-outline',
    route: '/customer-management',
  },
  {
    label: 'drawerProductsAndServices',
    icon: 'raphael:package',
    route: '/product-service',
  },
  {
    label: 'drawerQuotation',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerRequestList',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerWorkOrder',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerInvoice',
    icon: 'raphael:package',
    route: '',

    disabled: true,
  },
  {
    label: 'drawerAccountingLedger',
    icon: 'mdi-account-cash-outline',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerReport',
    icon: 'mdi-file-chart-outline',
    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
    v-model="leftDrawerOpen"
    side="left"
    :breakpoint="599"
    class="column justify-between no-wrap"
    :width="mini ? 110 : 256"
  >
    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
    <div class="scroll" style="overflow-x: hidden">
      <div
        class="flex justify-center items-center q-pa-md 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-px-md">
        <q-item
          v-for="v in labelMenu"
          dense
          clickable
          class="row items-center q-my-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">
            <Icon :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">
          {{ 'ชื่อสาขาที่ 1' }}
        </span>
        <span>
          {{ 'BR1001' }}
        </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-6);
  border-radius: var(--radius-2);
}
#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: var(--surface-0);
  padding: var(--size-4);
  padding-right: 0;
}

:deep(.q-drawer__content) {
  border-radius: var(--radius-2);
  background: var(--surface-1);
}

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