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

const currentRoute = ref<string>('');
const labelMenu: {
  label: string;
  icon: string;
}[] = [
  { label: 'Dashboard', icon: 'file-account-outline' },
  { label: 'จัดการสาขา', icon: 'add' },
  { label: 'จัดการผู้ใช้งาน', icon: 'add' },
  { label: 'จัดการหลักสูตร', icon: 'add' },
];

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="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
      >
        <q-item-section id="btn-drawer-back " class="test">
          <q-item-label>
            <!-- <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;
  }
}

.test {
  border: 1px solid blue;
}
</style>
