update sidebar
This commit is contained in:
Dede Fuji Abdul
parent
a7ead70332
commit
be5ec7fe83
@ -35,7 +35,7 @@ const isMenuSelected = computed(() => {
|
||||
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
|
||||
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
|
||||
<!-- Nested item with children -->
|
||||
<DisclosureButton @click="menu.toggleExpandedByHref(item.href, !item.expanded)"
|
||||
<DisclosureButton @click="menu.toggleSidebarMenu(item.href, !item.expanded)"
|
||||
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
|
||||
<embed :src="isChildren ? DotOutline : item.icon"
|
||||
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
|
||||
|
||||
@ -11,456 +11,7 @@ import type { MenuItemModel } from '@/utils/interfaces'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export const useMenuStore = defineStore('menu', () => {
|
||||
// const navigation: MenuItemModel[] = [
|
||||
// {
|
||||
// name: 'Gangguan',
|
||||
// href: '/gangguan',
|
||||
// icon: LightningSlash,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Daftar',
|
||||
// href: '/gangguan/1',
|
||||
// icon: LightningSlash,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
|
||||
// href: '/gangguan/1/1',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
|
||||
// href: '/gangguan/1/2',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Response Time',
|
||||
// href: '/gangguan/1/3',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Recovery Time',
|
||||
// href: '/gangguan/1/4',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
|
||||
// href: '/gangguan/1/5',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Berdasarkan Media',
|
||||
// href: '/gangguan/1/6',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Gangguan Diselesaikan Mobile APKT',
|
||||
// href: '/gangguan/1/7',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi',
|
||||
// href: '/gangguan/2',
|
||||
// icon: LightningSlash,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan All',
|
||||
// href: '/gangguan/2/1',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
|
||||
// href: '/gangguan/2/2',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
|
||||
// href: '/gangguan/2/3',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Posko',
|
||||
// href: '/gangguan/2/4',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Regu',
|
||||
// href: '/gangguan/2/5',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Tanggal',
|
||||
// href: '/gangguan/2/6',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Berdasarkan Media',
|
||||
// href: '/gangguan/2/7',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Alih Posko',
|
||||
// href: '/gangguan/2/8',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Status',
|
||||
// href: '/gangguan/2/9',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
|
||||
// href: '/gangguan/2/10',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Rating Per Posko',
|
||||
// href: '/gangguan/2/11',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Rating Per Regu',
|
||||
// href: '/gangguan/2/12',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Koreksi Transaksi Individual',
|
||||
// href: '/gangguan/2/13',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Cleansing Transaksi TM',
|
||||
// href: '/gangguan/2/14',
|
||||
// icon: LightningSlash,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Keluhan',
|
||||
// href: '/keluhan',
|
||||
// icon: SmileySad,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Daftar',
|
||||
// icon: SmileySad,
|
||||
// href: '/keluhan/1',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
|
||||
// href: '/keluhan/1/1',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
|
||||
// href: '/keluhan/1/2',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Response Time',
|
||||
// href: '/keluhan/1/3',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Recovery Time',
|
||||
// href: '/keluhan/1/4',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
|
||||
// href: '/keluhan/1/5',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Berdasarkan Media',
|
||||
// href: '/keluhan/1/6',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Daftar Keluhan Selesai di CC123',
|
||||
// href: '/keluhan/1/7',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi',
|
||||
// icon: SmileySad,
|
||||
// href: '/keluhan/2',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan All',
|
||||
// href: '/keluhan/2/1',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
|
||||
// href: '/keluhan/2/2',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
|
||||
// href: '/keluhan/2/3',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Per Tanggal',
|
||||
// href: '/keluhan/2/4',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Per Unit',
|
||||
// href: '/keluhan/2/5',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Berdasarkan Media',
|
||||
// href: '/keluhan/2/6',
|
||||
// icon: SmileySad,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Monalisa',
|
||||
// href: '/monalisa',
|
||||
// icon: Monitor,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Gangguan',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/1',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Rekapitulasi',
|
||||
// href: '/monalisa/1/1',
|
||||
// icon: Monitor,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Jumlah Kali Gangguan',
|
||||
// href: '/monalisa/1/1/1',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Recovery Time (RCT) Gangguan',
|
||||
// href: '/monalisa/1/1/2',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Response Time (RPT) Gangguan',
|
||||
// href: '/monalisa/1/1/3',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
|
||||
// href: '/monalisa/1/1/4',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Lapor Ulang Gangguan',
|
||||
// href: '/monalisa/1/1/5',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi ENS Gangguan',
|
||||
// href: '/monalisa/1/1/6',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Belum Selesai',
|
||||
// href: '/monalisa/1/1/7',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Keluhan',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/2',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Rekapitulasi',
|
||||
// href: '/monalisa/2/1',
|
||||
// icon: Monitor,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Jumlah Kali Keluhan',
|
||||
// href: '/monalisa/2/1/1',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Recovery Time (RCT) Keluhan',
|
||||
// href: '/monalisa/2/1/2',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Response Time (RPT) Keluhan',
|
||||
// href: '/monalisa/2/1/3',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
|
||||
// href: '/monalisa/2/1/4',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Lapor Ulang Keluhan',
|
||||
// href: '/monalisa/2/1/5',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Rekapitulasi Keluhan Belum Selesai',
|
||||
// href: '/monalisa/2/1/6',
|
||||
// icon: Monitor,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Laporan KPI',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Bulanan',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/1',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Penurunan Jumlah Komplain',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/1/1',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Aging Complaint',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/1/2',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Energy Not Sales (ENS)',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/1/3',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/1/4',
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Kumulatif',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/2',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Penurunan Jumlah Komplain',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/2/1',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Aging Complaint',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/2/2',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Energy Not Sales (ENS)',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/2/3',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
|
||||
// icon: Monitor,
|
||||
// href: '/monalisa/3/2/4',
|
||||
// children: [],
|
||||
// }
|
||||
// ],
|
||||
// }
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Check In Dan Check Out',
|
||||
// href: '/check-in-out',
|
||||
// icon: Swap,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Laporan Check In /Check Out (CICO)',
|
||||
// href: '/check-in-out/1',
|
||||
// icon: Swap,
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Laporan Check In /Check Out (CICO)',
|
||||
// href: '/check-in-out/1/1',
|
||||
// icon: Swap,
|
||||
// children: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ]
|
||||
const route = useRoute()
|
||||
const navigation = ref<MenuItemModel[]>([
|
||||
{
|
||||
name: 'Gangguan',
|
||||
@ -984,11 +535,10 @@ export const useMenuStore = defineStore('menu', () => {
|
||||
},
|
||||
])
|
||||
const sidebarOpen = ref(false)
|
||||
const route = useRoute()
|
||||
const sedebarShowed = ref(true)
|
||||
const menuSelected = ref(route.fullPath)
|
||||
const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
|
||||
|
||||
const toggleExpandedByHref = (href: string, newExpanded: boolean): void => {
|
||||
const toggleSidebarMenu = (href: string, newExpanded: boolean): void => {
|
||||
const toggleItemExpanded = (items: MenuItemModel[]): void => {
|
||||
for (const item of items) {
|
||||
if (item.href === href) {
|
||||
@ -1008,12 +558,15 @@ export const useMenuStore = defineStore('menu', () => {
|
||||
|
||||
toggleItemExpanded(navigation.value)
|
||||
}
|
||||
const toggleSidebarDesktop = () => (sedebarShowed.value = !sedebarShowed.value)
|
||||
|
||||
return {
|
||||
navigation,
|
||||
toggleSidebar,
|
||||
sidebarOpen,
|
||||
menuSelected,
|
||||
toggleExpandedByHref
|
||||
toggleSidebarMenu,
|
||||
sedebarShowed,
|
||||
toggleSidebarDesktop
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user