Thanks for the feedback.
This come to my mind when building the panel for a user and admin (which refer to our internal staff use). So, i am thinking to separate it out instead of implement the control on e.g. navbar items, ... etc. I found difficulty when trying to differentiate the view for the role. Since, there's totally different view to be displayed for them, so maybe i can just create another application specifically for the role. The only part need to be taken care, e.g. css where need to be standardised.
This is '.js' in store directory for my vue application, which used to populate my menu items. But i am not sure how can it be done to populate the menu items based on role. As for now i only can fix it as one role. Still trying to understand how it works.
index.js
import { createStore } from "vuex";
import main from "./main";
import topMenu from "./top-menu";
const store = createStore({
modules: {
main,
topMenu
}
});
export function useStore() {
return store;
}
export default store;
top-menu.js
const state = () => {
return {
menu: [
{
icon: "HomeIcon",
pageName: "top-menu-dashboard",
title: "dashboard.dashboard",
},
]
};
};
// getters
const getters = {
menu: state => state.menu
};
// actions
const actions = {};
// mutations
const mutations = {};
export default {
namespaced: true,
state,
getters,
actions,
mutations
};