124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
const router = useRouter();
|
|
|
|
const currentRoute = ref<string>('');
|
|
|
|
const labelMenu = ref<{ label: string; icon: string; route: string }[]>([
|
|
{
|
|
label: 'drawerDashboard',
|
|
icon: 'img:/file-account-outline.png',
|
|
route: '',
|
|
},
|
|
{
|
|
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: '',
|
|
},
|
|
{
|
|
label: 'drawerProductsAndServices',
|
|
icon: 'raphael:package',
|
|
route: '',
|
|
},
|
|
{ label: 'drawerQuotation', icon: 'raphael:package', route: '' },
|
|
{ label: 'drawerRequestList', icon: 'raphael:package', route: '' },
|
|
{ label: 'drawerWorkOrder', icon: 'raphael:package', route: '' },
|
|
{ label: 'drawerInvoice', icon: 'raphael:package', route: '' },
|
|
{
|
|
label: 'drawerAccountingLedger',
|
|
icon: 'mdi-account-cash-outline',
|
|
route: '',
|
|
},
|
|
{ label: 'drawerReport', 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"
|
|
behavior="mobile"
|
|
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 row items-center">
|
|
<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>
|
|
</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);
|
|
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>
|