test

components/layout/full/Main.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, shallowRef, watch } from "vue";
 import { useDisplay } from "vuetify";
 import sidebarItems from "~/components/layout/full/vertical-sidebar/sidebarItem";
 import { Menu2Icon } from "vue-tabler-icons";
-import { useCustomizerStore } from "~/store/customizer";
+import { useCustomizerStore } from "~/stores/customizer";
 const sidebarMenu = shallowRef(sidebarItems);
 const customizer = useCustomizerStore();
 const { mdAndDown } = useDisplay();
@@ -14,6 +14,9 @@ onMounted(() => {
 watch(mdAndDown, (val) => {
   sDrawer.value = !val;
 });
+
+// console.log("sidebarMenu", sidebarMenu.value);
+// console.log("sidebarMenu", sidebarItems.map((item) => item.children));
 </script>
 
 <template>
@@ -26,7 +29,7 @@ watch(mdAndDown, (val) => {
         customizer.actTheme,
         customizer.mini_sidebar ? 'mini-sidebar' : '',
         customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
-        customizer.setBorderCard ? 'cardBordered' : ''
+        customizer.setBorderCard ? 'cardBordered' : '',
       ]"
     >
       <!---Customizer location left side--->

components/layout/full/customizer/Customizer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useTheme } from 'vuetify';
-import { useCustomizerStore } from '~/store/customizer';
+import { useCustomizerStore } from '~/stores/customizer';
 import {
     CheckIcon,
     LayoutColumnsIcon,

components/layout/full/logo/Logo.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { useCustomizerStore } from '~/store/customizer';
+import { useCustomizerStore } from '~/stores/customizer';
 
 const customizer = useCustomizerStore();
 

components/layout/full/vertical-header/ThemeToggler.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useTheme } from 'vuetify';
-import { useCustomizerStore } from '~/store/customizer';
+import { useCustomizerStore } from '~/stores/customizer';
 import { Icon } from '@iconify/vue';
 
 const theme = useTheme();

components/layout/full/vertical-header/VerticalHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
-import { useCustomizerStore } from '~/store/customizer';
+import { useCustomizerStore } from '~/stores/customizer';
 // import { useEcomStore } from '@/stores/apps/eCommerce';
 // import LanguageDD from './LanguageDD.vue';
 import NotificationDD from './NotificationDD.vue';

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',