109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
|
|
const currentRoute = ref<string>('');
|
|
const labelMenu: {
|
|
label: string;
|
|
icon: string;
|
|
route: string;
|
|
}[] = [
|
|
{ label: 'Dashboard', icon: 'img:/file-account-outline.png', route: '' },
|
|
{
|
|
label: 'จัดการสาขา',
|
|
icon: 'mdi-sitemap-outline',
|
|
route: '/branch-management',
|
|
},
|
|
{
|
|
label: 'จัดการบุคลากร',
|
|
icon: 'mdi-account-settings-outline',
|
|
route: '/personnel-management',
|
|
},
|
|
{ label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline', route: '' },
|
|
{ label: 'สินค้าและบริการ', icon: 'mdi-package-variant', route: '' },
|
|
{ label: 'ใบเสนอราคา', icon: 'mdi-package-variant', route: '' },
|
|
{ label: 'รายการคำขอ', icon: 'mdi-package-variant', route: '' },
|
|
{ label: 'ใบสั่งงาน', icon: 'mdi-package-variant', route: '' },
|
|
{ label: 'ใบรับสินค้า', icon: 'mdi-package-variant', route: '' },
|
|
{ label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline', route: '' },
|
|
{ label: 'รายงาน', icon: 'mdi-file-chart-outline', route: '' },
|
|
];
|
|
|
|
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
|
default: false,
|
|
});
|
|
|
|
function navigateTo(label: string, destination: string) {
|
|
currentRoute.value = label;
|
|
router.push(`${destination}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Drawer -->
|
|
<q-drawer
|
|
:breakpoint="500"
|
|
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" style="width: 70%; height: 70%" />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="drawer-menu" class="q-pr-sm">
|
|
<q-item
|
|
v-for="v in labelMenu"
|
|
:key="v.label"
|
|
clickable
|
|
@click="navigateTo(v.label, v.route)"
|
|
class="no-padding"
|
|
:class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
|
|
>
|
|
<q-item-section id="btn-drawer-back ">
|
|
<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>
|