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

components/layout/full/vertical-sidebar/sidebarItem.ts

@@ -14,21 +14,28 @@ export interface menu {
   disabled?: boolean;
   type?: string;
   subCaption?: string;
+  role?: string[];
+  permission?: string[];
 }
 const sidebarItem: menu[] = [
   {
-      header: 'dashboards',
+      header: "dashboards",
       id: 1,
-      children: [
+      
+            children: [
           {
               title: 'Dashboard1',
               icon: 'widget-add-line-duotone',
-              to: '/dashboards/dashboard1'
+              to: '/dashboards/dashboard1',
+            //   role: ['admin'],
+              //permission: ['view', 'update', 'create', 'delete'],
           },
           {
               title: 'Dashboard2',
               icon: 'chart-line-duotone',
-              to: '/dashboards/dashboard2'
+              to: '/dashboards/dashboard2',
+            //   role: ['admin','user'],
+              //permission: ['view', 'update', 'create', 'delete'],
           },
           {
               title: 'Dashboard3',
@@ -42,11 +49,15 @@ const sidebarItem: menu[] = [
               children: [
                   {
                       title: 'Homepage',
-                      to: '/front-page/homepage'
+                      to: '/front-page/homepage',
+                      //role: ['admin','user'],
+                      //permission: ['view', 'update', 'create', 'delete'],
                   },
                   {
                       title: 'About Us',
-                      to: '/front-page/about-us'
+                      to: '/front-page/about-us',
+                      //role: ['admin','user'],
+                      //permission: ['view', 'update', 'create', 'delete'],
                   },
                   {
                       title: 'Blog',