Remove menuservice

src/AppMenu.vue

@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import MenuService from './service/MenuService';
 import {FilterService,FilterMatchMode} from 'primevue/api';
+import menudata from '@/assets/menu/menu.json';
 
 export default {
     props: {
@@ -58,21 +58,14 @@ export default {
     data() {
         return {
             activeSubmenus: {},
-            menu: null,
+            menu: menudata.data,
             filteredRoutes: null,
             selectedRoute: null,
             routes: []
         }
     },
-    menuService: null,
-    created() {
-        this.menuService = new MenuService();
-    },
     mounted() {
-        this.menuService.getMenu().then(data => {
-            this.menu = data;
-
-            data.forEach((route) => {
+        this.menu.forEach((route) => {
             let childRoute = {...route};
             childRoute.children = childRoute.children.filter((child) => {
                 if (child.meta) {
@@ -84,7 +77,6 @@ export default {
 
             this.routes.push(childRoute);            
         });
-        })
     },
     methods: {
         toggleSubmenu(event, name) {

src/service/MenuService.js

@@ -1,8 +0,0 @@
-import axios from 'axios';
-
-export default class MenuService {
-
-    getMenu() {
-        return axios.get('demo/menu/menu.json').then(res => res.data.data);
-    }
-}

src/views/overlaypanel/OverlayPanelDemo.vue

@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
+                <Button ref="btn" type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
                 <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width:450px" :breakpoints="{'960px': '75vw'}">
                     <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
@@ -50,6 +50,8 @@ export default {
     },
     mounted() {
         this.productService.getProductsSmall().then(data => this.products = data);
+
+        this.$refs.op.show({currentTarget: this.$refs.button.$el});
     },
     methods: {
         toggle(event) {