jws-frontend/src/components/DrawerComponent.vue

<script setup lang="ts">
import { ref } from 'vue';

const currentRoute = ref<string>('');
const labelMenu: {
  label: string;
  icon: string;
}[] = [
  { label: 'Dashboard', icon: 'mdi-folder-arrow-left' },
  { label: 'จัดการสาขา', icon: 'mdi-folder-arrow-left' },
  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline' },
  { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline' },
  { label: 'สินค้าและบริการ', icon: 'mdi-folder-arrow-left' },
  { label: 'ใบเสนอราคา', icon: 'mdi-folder-arrow-left' },
  { label: 'รายการคำขอ', icon: 'mdi-folder-arrow-left' },
  { label: 'ใบสั่งงาน', icon: 'mdi-folder-arrow-left' },
  { label: 'ใบรับสินค้า', icon: 'mdi-folder-arrow-left' },
  { label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline' },
  { label: 'รายงาน', icon: 'mdi-file-chart-outline' },
];

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

<template>
  <!-- Drawer -->
  <q-drawer v-model="leftDrawerOpen" side="left" show-if-above>
    <div class="main-bar">
      <div
        class="column items-center justify-center q-pa-xl cursor-pointer"
        @click="$router.push('/')"
        id="btn-drawer-home"
      >
        <q-img src="/logo.png" />
      </div>
    </div>

    <div id="drawer-menu" class="q-pr-sm">
      <q-item
        v-for="v in labelMenu"
        :key="v.label"
        clickable
        @click="currentRoute = v.label"
        class="no-padding"
        :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
      >
        <q-item-section id="btn-drawer-back " style="border: 10px">
          <q-item-label class="q-pl-lg">
            <div class="box-border-left" />
            <q-icon :name="v.icon" size="sm" class="q-mr-xs" />

            {{ v.label }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </div>
  </q-drawer>
</template>

<style lang="scss" scoped>
#drawer-menu :deep(.q-item) {
  color: var(--gray-6);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
#drawer-menu :deep(.q-item.active) {
  --_drawer-item-background-color: var(--brand-1) !important;
  background-color: var(--_drawer-item-background-color) !important;
  color: white;
  border-left: 10px solid $secondary;

  &.dark {
    --_drawer-item-background-color: var(--gray-10) !important;
    border: 1px solid var(--brand-1);
    border-left: 10px solid $secondary;
    .box-border-left {
      position: absolute;
      width: 10px;
      background: $secondary;
      height: 48.5px;
      top: -1px;
      left: -10px;
    }
  }
}
</style>