77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
|
<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>
|