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';

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: false,
});

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"
    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
    class="column justify-between no-wrap"
  >
    <div class="scroll">
      <div
        class="flex justify-center q-pa-xl cursor-pointer"
        @click="$router.push('/')"
        id="btn-drawer-home"
      >
        <q-img src="/logo.png" style="width: 80%; height: 70%" />
      </div>

      <div id="drawer-menu" class="q-pr-sm q-pl-md">
        <q-item
          v-for="v in labelMenu"
          dense
          :key="v.label"
          clickable
          :disable="!!v.disabled"
          class="no-padding q-my-xs"
          :class="{
            active: currentPath === v.route,
            'border-active': currentPath === v.route,
            dark: $q.dark.isActive,
          }"
          @click="navigateTo(v.label, v.route)"
        >
          <q-item-section id="btn-drawer-back">
            <q-item-label class="row items-center q-px-md">
              <div class="box-border-left" />
              <Icon :icon="v.icon" width="24px" class="q-mr-md" />
              {{ $t(v.label) }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </div>
    </div>

    <div class="surface-2 q-px-md q-py-sm row justify-between items-center">
      <div class="flex q-gutter-x-md items-center">
        <q-avatar
          text-color="white"
          size="md"
          style="background-color: var(--violet-1)"
          class="relative-position"
        >
          <q-icon
            name="mdi-home-group"
            size="sm"
            style="color: var(--violet-11)"
          />
          <div class="dot absolute-bottom-right" />
        </q-avatar>

        <div class="text-caption column">
          <span class="text-weight-bold">
            {{ 'ชื่อสาขาที่ 1' }}
          </span>
          <span>
            {{ 'BR1001' }}
          </span>
        </div>
      </div>
      <q-btn
        dense
        flat
        rounded
        icon="mdi-cog-outline"
        size="sm"
        @click="branchSetting"
      ></q-btn>
    </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;
}

:deep(.q-drawer) {
  background-color: var(--surface-3);
  padding: var(--size-4);
  padding-right: 0;
}

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

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

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