167 lines
3.7 KiB
Vue
167 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
const router = useRouter();
|
|
|
|
const currentRoute = ref<string>('');
|
|
const currentPath = computed(() => {
|
|
return router.currentRoute.value.path;
|
|
});
|
|
|
|
const labelMenu = ref<
|
|
{ label: string; icon: string; route: string; disabled?: boolean }[]
|
|
>([
|
|
{
|
|
label: 'drawerDashboard',
|
|
icon: 'mage:dashboard',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
{
|
|
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: '/customer-management',
|
|
},
|
|
{
|
|
label: 'drawerProductsAndServices',
|
|
icon: 'raphael:package',
|
|
route: '/product-service',
|
|
},
|
|
{
|
|
label: 'drawerQuotation',
|
|
icon: 'raphael:package',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: 'drawerRequestList',
|
|
icon: 'raphael:package',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: 'drawerWorkOrder',
|
|
icon: 'raphael:package',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: 'drawerInvoice',
|
|
icon: 'raphael:package',
|
|
route: '',
|
|
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: 'drawerAccountingLedger',
|
|
icon: 'mdi-account-cash-outline',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: 'drawerReport',
|
|
icon: 'mdi-file-chart-outline',
|
|
route: '',
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
|
default: false,
|
|
});
|
|
|
|
function navigateTo(label: string, destination: string) {
|
|
currentRoute.value = label;
|
|
router.push(`${destination}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Drawer -->
|
|
<q-drawer
|
|
v-model="leftDrawerOpen"
|
|
side="left"
|
|
:breakpoint="599"
|
|
:width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
|
|
>
|
|
<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: 80%; height: 70%" />
|
|
</div>
|
|
|
|
<div id="drawer-menu" class="q-pr-sm">
|
|
<q-item
|
|
v-for="v in labelMenu"
|
|
:key="v.label"
|
|
clickable
|
|
:disable="!!v.disabled"
|
|
@click="navigateTo(v.label, v.route)"
|
|
class="no-padding"
|
|
:class="{ active: currentPath === v.route, 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.q-drawer) {
|
|
background-color: transparent;
|
|
padding: var(--size-4);
|
|
padding-right: 0;
|
|
}
|
|
|
|
:deep(.q-drawer__content) {
|
|
border-radius: var(--radius-2);
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
</style>
|