test

components/layout/full/vertical-sidebar/VerticalSidebar.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref, shallowRef } from 'vue';
-import { useCustomizerStore } from '~/store/customizer';
-import sidebarItems from './sidebarItem';
+import { useCustomizerStore } from '~/stores/customizer';
+import sidebarItems from './sidebarItem'; //sidebar static dari template
 import Logo from '../logo/Logo.vue';
 import { Icon } from '@iconify/vue';
 import { useRoute } from 'vue-router';
 // MiniSidebar Icons
 import MiniSideIcons from './MinIconItems';
+//import { useSidebarAccess } from '~/composables/useSidebarAccess'
+import { mergeSidebar, mergeSidebarIcon } from '~/composables/sidebarMenu/mergeSidebar';
+import sidebarRole from "@/stores/rolePages"; // data dummy
 
 const route = useRoute();
 
@@ -36,7 +39,25 @@ const findTitleByPath = (items: any, path: any) => {
 
     return title;
 };
-const foundId = findTitleByPath(sidebarItems, route.path);
+
+const customizer = useCustomizerStore();
+const sidebarMenu = shallowRef(sidebarItems);
+
+//Merge Sidebar dari user api
+//sidebarItems dari static sidebar
+//sidebarRole dari role user api
+const userRole = "admin";
+const roleSidebarItems = sidebarRole.filter(item => item.role === userRole);
+//filter menu untuk userRole admin
+//mergeSidebar (menu awal, menu role user)
+const mergedPages = mergeSidebar(sidebarMenu.value, roleSidebarItems[0].pages)
+console.log('sidebarMenu', sidebarMenu.value);
+console.log('roleSidebarItems', roleSidebarItems[0].pages);
+console.log('mergedSidebarMenu', mergedPages);
+sidebarMenu.value = mergedPages
+
+
+const foundId = findTitleByPath(mergedPages, route.path);
 const getCurrent = foundId ? foundId : 1;
 const currentMenu = ref<any>(getCurrent);
 function showData(data: any) {
@@ -44,10 +65,19 @@ function showData(data: any) {
     //customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
 }
 
-// MiniSidebar Icons End
-const customizer = useCustomizerStore();
-const sidebarMenu = shallowRef(sidebarItems);
 
+
+//Merge Icon dari sidebarMenu api
+const sidebarMiniSideIcons = shallowRef(MiniSideIcons);
+if (mergedPages !== null) { 
+    sidebarMiniSideIcons.value = mergedPages
+    const mergedIcon = mergeSidebarIcon(MiniSideIcons, sidebarMiniSideIcons.value)
+    //console.log('sidebarIcon', MiniSideIcons);
+    console.log('mergedsidebarIcon', mergedIcon);
+    sidebarMiniSideIcons.value = mergedIcon
+}
+
+// MiniSidebar Icons End
 </script>
 
 <template>
@@ -74,7 +104,7 @@ const sidebarMenu = shallowRef(sidebarItems);
                 <div class="miniicons mt-lg-0 mt-4">
                     <!-- MiniSidebar Icons -->
                     <div class="d-flex flex-column gap-2">
-                        <div class="miniicons-list px-4" v-for="menu in MiniSideIcons" :key="menu.icon">
+                        <div class="miniicons-list px-4" v-for="menu in sidebarMiniSideIcons" :key="menu.icon">
                             <v-btn
                                 rounded="md"
                                 flat