From 3af3a3387f6332e856e2129c8284cc7bd545f66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 4 Jan 2021 09:58:56 +0300
Subject: [PATCH] dynamic menu

---
 public/demo/menu/menu.json | 773 +++++++++++++++++++++++++++++++++++++
 src/AppMenu.vue            | 310 ++-------------
 src/service/MenuService.js |   8 +
 3 files changed, 823 insertions(+), 268 deletions(-)
 create mode 100644 public/demo/menu/menu.json
 create mode 100644 src/service/MenuService.js

diff --git a/public/demo/menu/menu.json b/public/demo/menu/menu.json
new file mode 100644
index 000000000..8bb52e451
--- /dev/null
+++ b/public/demo/menu/menu.json
@@ -0,0 +1,773 @@
+{
+    "data": [
+        {
+            "name": "Vue 2",
+            "meta": ["general"],
+            "children": [
+                {
+                    "name": "PrimeVue 2",
+                    "href": "https://www.primefaces.org/primevue/showcase-v2"
+                }
+            ]
+        },
+        {
+            "name": "General",
+            "meta": ["general"],
+            "children": [
+                {
+                    "name": "Get Started",
+                    "to": "/setup"
+                },
+                {
+                    "name": "Forum",
+                    "href": "https://forum.primefaces.org/viewforum.php?f=110"
+                },
+                {
+                    "name": "Discord Channel",
+                    "href": "https://discord.gg/gzKFYnpmCY"
+                },
+                {
+                    "name": "Source Code",
+                    "href": "https://github.com/primefaces/primevue"
+                },
+                {
+                    "name": "Support",
+                    "to": "/support"
+                },
+                {
+                    "name": "Store",
+                    "href": "https://www.primefaces.org/store"
+                },
+                {
+                    "name": "Locale",
+                    "to": "/locale",
+                    "badge": "New"
+                },
+                {
+                    "name": "Accessibility",
+                    "to": "/accessibility"
+                }
+            ]
+        },
+        {
+            "name": "Theming",
+            "meta": ["theming"],
+            "children": [
+                {
+                    "name": "Guide",
+                    "to": "/theming"
+                },
+                {
+                    "name": "Theme Design",
+                    "href": "https://www.primefaces.org/designer/primevue"
+                },
+                {
+                    "name": "Visual Editor",
+                    "href": "https://www.primefaces.org/designer-vue"
+                },
+                {
+                    "name": "SASS API",
+                    "href": "https://www.primefaces.org/designer/api/primevue/3.0.0"
+                }
+            ]
+        },
+        {
+            "name": "PrimeFlex",
+            "meta": ["primeflex"],
+            "children": [
+                {
+                    "name": "Setup",
+                    "to": "/primeflex"
+                },
+                {
+                    "name": "Display",
+                    "to": "/display"
+                },
+                {
+                    "name": "Elevation",
+                    "to": "/elevation"
+                },
+                {
+                    "name": "Flexbox",
+                    "to": "/flexbox"
+                },
+                {
+                    "name": "Form Layout",
+                    "to": "/formlayout"
+                },
+                {
+                    "name": "Grid System",
+                    "to": "/grid"
+                },
+                {
+                    "name": "Spacing",
+                    "to": "/spacing"
+                },
+                {
+                    "name": "Text",
+                    "to": "/text"
+                }
+            ]
+        },
+        {
+            "name": "PrimeIcons",
+            "meta": ["primeicons"],
+            "children": [
+                {
+                    "name": "Icons v4.0",
+                    "to": "/icons"
+                }
+            ]
+        },
+        {
+            "name": "Form",
+            "meta": ["form"],
+            "children": [
+                {
+                    "name": "AutoComplete",
+                    "to": "/autocomplete"
+                },
+                {
+                    "name": "Calendar",
+                    "to": "/calendar"
+                },
+                {
+                    "name": "CascadeSelect",
+                    "to": "/cascadeselect",
+                    "badge": "New"
+                },
+                {
+                    "name": "Checkbox",
+                    "to": "/checkbox"
+                },
+                {
+                    "name": "Chips",
+                    "to": "/chips"
+                },
+                {
+                    "name": "ColorPicker",
+                    "to": "/colorpicker"
+                },
+                {
+                    "name": "Dropdown",
+                    "to": "/dropdown"
+                },
+                {
+                    "name": "Editor",
+                    "to": "/editor"
+                },
+                {
+                    "name": "InputGroup",
+                    "to": "/inputgroup"
+                },
+                {
+                    "name": "InputMask",
+                    "to": "/inputmask"
+                },
+                {
+                    "name": "InputNumber",
+                    "to": "/inputnumber"
+                },
+                {
+                    "name": "InputSwitch",
+                    "to": "/inputswitch"
+                },
+                {
+                    "name": "InputText",
+                    "to": "/inputtext"
+                },
+                {
+                    "name": "FloatLabel",
+                    "to": "/floatlabel"
+                },
+                {
+                    "name": "Knob",
+                    "to": "/knob",
+                    "badge": "New"
+                },
+                {
+                    "name": "Listbox",
+                    "to": "/listbox"
+                },
+                {
+                    "name": "MultiSelect",
+                    "to": "/multiselect"
+                },
+                {
+                    "name": "Password",
+                    "to": "/password"
+                },
+                {
+                    "name": "RadioButton",
+                    "to": "/radiobutton"
+                },
+                {
+                    "name": "Rating",
+                    "to": "/rating"
+                },
+                {
+                    "name": "SelectButton",
+                    "to": "/selectbutton"
+                },
+                {
+                    "name": "Slider",
+                    "to": "/slider"
+                },
+                {
+                    "name": "Textarea",
+                    "to": "/textarea"
+                },
+                {
+                    "name": "ToggleButton",
+                    "to": "/togglebutton"
+                },
+                {
+                    "name": "TriStateCheckbox",
+                    "to": "/tristatecheckbox"
+                }
+            ]
+        },
+        {
+            "name": "Button",
+            "meta": ["button"],
+            "children": [
+                {
+                    "name": "Button",
+                    "to": "/button"
+                },
+                {
+                    "name": "SplitButton",
+                    "to": "/splitbutton"
+                }
+            ]
+        },
+        {
+            "name": "Data",
+            "meta": ["datatable"],
+            "children": [
+                {
+                    "name": "DataTable",
+                    "meta": ["datatable"],
+                    "children": [
+                        {
+                            "name": "Documentation",
+                            "to": "/datatable"
+                        },
+                        {
+                            "name": "Basic",
+                            "to": "/datatable/basic"
+                        },
+                        {
+                            "name": "Dynamic",
+                            "to": "/datatable/dynamiccolumns"
+                        },
+                        {
+                            "name": "Templating",
+                            "to": "/datatable/templating"
+                        },
+                        {
+                            "name": "Size",
+                            "to": "/datatable/size"
+                        },
+                        {
+                            "name": "Gridlines",
+                            "to": "/datatable/gridlines"
+                        },
+                        {
+                            "name": "Striped",
+                            "to": "/datatable/striped"
+                        },
+                        {
+                            "name": "ColGroup",
+                            "to": "/datatable/colgroup"
+                        },
+                        {
+                            "name": "Paginator",
+                            "to": "/datatable/paginator"
+                        },
+                        {
+                            "name": "Sort",
+                            "to": "/datatable/sort"
+                        },
+                        {
+                            "name": "Filter",
+                            "to": "/datatable/filter"
+                        },
+                        {
+                            "name": "Selection",
+                            "to": "/datatable/selection"
+                        },
+                        {
+                            "name": "Lazy",
+                            "to": "/datatable/lazy"
+                        },
+                        {
+                            "name": "Scroll",
+                            "to": "/datatable/scroll"
+                        },
+                        {
+                            "name": "FlexScroll",
+                            "to": "/datatable/flexscroll"
+                        },
+                        {
+                            "name": "Expand",
+                            "to": "/datatable/rowexpand"
+                        },
+                        {
+                            "name": "Edit",
+                            "to": "/datatable/edit"
+                        },
+                        {
+                            "name": "ColToggle",
+                            "to": "/datatable/coltoggle"
+                        },
+                        {
+                            "name": "ColResize",
+                            "to": "/datatable/colresize"
+                        },
+                        {
+                            "name": "Reorder",
+                            "to": "/datatable/reorder"
+                        },
+                        {
+                            "name": "RowGroup",
+                            "to": "/datatable/rowgroup"
+                        },
+                        {
+                            "name": "ContextMenu",
+                            "to": "/datatable/contextmenu"
+                        },
+                        {
+                            "name": "Responsive",
+                            "to": "/datatable/responsive"
+                        },
+                        {
+                            "name": "Export",
+                            "to": "/datatable/export"
+                        },
+                        {
+                            "name": "State",
+                            "to": "/datatable/state"
+                        },
+                        {
+                            "name": "Style",
+                            "to": "/datatable/style"
+                        },
+                        {
+                            "name": "Crud",
+                            "to": "/datatable/crud"
+                        }
+                    ]
+                },
+                {
+                    "name": "DataView",
+                    "to": "/dataview"
+                },
+                {
+                    "name": "FullCalendar",
+                    "to": "/fullcalendar"
+                },
+                {
+                    "name": "OrderList",
+                    "to": "/orderlist"
+                },
+                {
+                    "name": "OrganizationChart",
+                    "to": "/organizationchart"
+                },
+                {
+                    "name": "Paginator",
+                    "to": "/paginator"
+                },
+                {
+                    "name": "PickList",
+                    "to": "/picklist"
+                },
+                {
+                    "name": "Timeline",
+                    "to": "/timeline"
+                },
+                {
+                    "name": "Tree",
+                    "meta": ["tree"],
+                    "children": [
+                        {
+                            "name": "Documentation",
+                            "to": "/tree"
+                        },
+                        {
+                            "name": "Selection",
+                            "to": "/tree/selection"
+                        },
+                        {
+                            "name": "Lazy",
+                            "to": "/tree/lazy"
+                        },
+                        {
+                            "name": "Templating",
+                            "to": "/tree/templating"
+                        },
+                        {
+                            "name": "Filter",
+                            "to": "/tree/filter"
+                        }
+                    ]
+                },
+                {
+                    "name": "TreeTable",
+                    "meta": ["treetable"],
+                    "children": [
+                        {
+                            "name": "Documentation",
+                            "to": "/treetable"
+                        },
+                        {
+                            "name": "Templating",
+                            "to": "/treetable/templating"
+                        },
+                        {
+                            "name": "Size",
+                            "to": "/treetable/size"
+                        },
+                        {
+                            "name": "Paginator",
+                            "to": "/treetable/paginator"
+                        },
+                        {
+                            "name": "Sort",
+                            "to": "/treetable/sort"
+                        },
+                        {
+                            "name": "Filter",
+                            "to": "/treetable/filter"
+                        },
+                        {
+                            "name": "Selection",
+                            "to": "/treetable/selection"
+                        },
+                        {
+                            "name": "Lazy",
+                            "to": "/treetable/lazy"
+                        },
+                        {
+                            "name": "ColToggle",
+                            "to": "/treetable/coltoggle"
+                        },
+                        {
+                            "name": "Tempalting",
+                            "to": "/treetable/templating"
+                        },
+                        {
+                            "name": "Filter",
+                            "to": "/treetable/filter"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Panel",
+            "meta": ["panel"],
+            "children": [
+                {
+                    "name": "Accordion",
+                    "to": "/accordion"
+                },
+                {
+                    "name": "Card",
+                    "to": "/card"
+                },
+                {
+                    "name": "Deferred",
+                    "to": "/deferredcontent"
+                },
+                {
+                    "name": "Divider",
+                    "to": "/divider"
+                },
+                {
+                    "name": "Fieldset",
+                    "to": "/fieldset"
+                },
+                {
+                    "name": "Panel",
+                    "to": "/panel"
+                },
+                {
+                    "name": "Splitter",
+                    "to": "/splitter",
+                    "badge": "New"
+                },
+                {
+                    "name": "ScrollPanel",
+                    "to": "/scrollpanel"
+                },
+                {
+                    "name": "Tabview",
+                    "to": "/tabview"
+                },
+                {
+                    "name": "Toolbar",
+                    "to": "/toolbar"
+                }
+            ]
+        },
+        {
+            "name": "Overlay",
+            "meta": ["overlay"],
+            "children": [
+                {
+                    "name": "ConfirmDialog",
+                    "to": "/confirmdialog",
+                    "badge": "New"
+                },
+                {
+                    "name": "ConfirmPopup",
+                    "to": "/confirmpopup",
+                    "badge": "New"
+                },
+                {
+                    "name": "Dialog",
+                    "to": "/dialog"
+                },
+                {
+                    "name": "OverlayPanel",
+                    "to": "/overlaypanel"
+                },
+                {
+                    "name": "Sidebar",
+                    "to": "/sidebar"
+                },
+                {
+                    "name": "Tooltip",
+                    "to": "/tooltip"
+                }
+            ]
+        },
+        {
+            "name": "File",
+            "meta": ["file"],
+            "children": [
+                {
+                    "name": "Upload",
+                    "to": "/fileupload"
+                }
+            ]
+        },
+        {
+            "name": "Menu",
+            "meta": ["menu"],
+            "children": [
+                {
+                    "name": "MenuModel",
+                    "to": "/menumodel"
+                },
+                {
+                    "name": "BreadCrumb",
+                    "to": "/breadCrumb"
+                },
+                {
+                    "name": "ContextMenu",
+                    "to": "/contextmenu"
+                },
+                {
+                    "name": "MegaMenu",
+                    "to": "/megamenu"
+                },
+                {
+                    "name": "Menu",
+                    "to": "/menu"
+                },
+                {
+                    "name": "Menubar",
+                    "to": "/menubar"
+                },
+                {
+                    "name": "PanelMenu",
+                    "to": "/panelmenu"
+                },
+                {
+                    "name": "Steps",
+                    "to": "/steps"
+                },
+                {
+                    "name": "TabMenu",
+                    "to": "/tabmenu"
+                },
+                {
+                    "name": "TieredMenu",
+                    "to": "/tieredmenu"
+                }
+            ]
+        },
+        {
+            "name": "Chart",
+            "meta": ["chart"],
+            "children": [
+                {
+                    "name": "ChartModel",
+                    "to": "/chart"
+                },
+                {
+                    "name": "Pie",
+                    "to": "/chart/pie"
+                },
+                {
+                    "name": "Doughnut",
+                    "to": "/chart/doughnut"
+                },
+                {
+                    "name": "Bar",
+                    "to": "/chart/bar"
+                },
+                {
+                    "name": "Line",
+                    "to": "/chart/line"
+                },
+                {
+                    "name": "PolarArea",
+                    "to": "/chart/polararea"
+                },
+                {
+                    "name": "Radar",
+                    "to": "/chart/radar"
+                },
+                {
+                    "name": "Combo",
+                    "to": "/chart/combo"
+                }
+            ]
+        },
+        {
+            "name": "Messages",
+            "meta": ["messages"],
+            "children": [
+                {
+                    "name": "Message",
+                    "to": "/message"
+                },
+                {
+                    "name": "Toast",
+                    "to": "/toast"
+                }
+            ]
+        },
+        {
+            "name": "Media",
+            "meta": ["media"],
+            "children": [
+                {
+                    "name": "Carousel",
+                    "to": "/carousel"
+                },
+                {
+                    "name": "Galleria",
+                    "meta": ["galleria"],
+                    "children": [
+                        {
+                            "name": "Documentation",
+                            "to": "/galleria"
+                        },
+                        {
+                            "name": "Programmatic",
+                            "to": "/galleria/programmatic"
+                        },
+                        {
+                            "name": "Indicator",
+                            "to": "/galleria/indicator"
+                        },
+                        {
+                            "name": "Thumbnail",
+                            "to": "/galleria/thumbnail"
+                        },
+
+                        {
+                            "name": "Navigator",
+                            "to": "/galleria/navigator"
+                        },
+                        {
+                            "name": "Responsive",
+                            "to": "/galleria/responsive"
+                        },
+                        {
+                            "name": "FullScreen",
+                            "to": "/galleria/fullScreen"
+                        },
+                        {
+                            "name": "AutoPlay",
+                            "to": "/galleria/autoplay"
+                        },
+                        {
+                            "name": "Caption",
+                            "to": "/galleria/caption"
+                        },
+                        {
+                            "name": "Advanced",
+                            "to": "/galleria/advanced"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Misc",
+            "meta": ["misc"],
+            "children": [
+                {
+                    "name": "Avatar",
+                    "to": "/avatar",
+                    "badge": "New"
+                },
+                {
+                    "name": "Badge",
+                    "to": "/badge",
+                    "badge": "New"
+                },
+                {
+                    "name": "Chip",
+                    "to": "/chip",
+                    "badge": "New"
+                },
+                {
+                    "name": "BlockUI",
+                    "to": "/blockui"
+                },
+                {
+                    "name": "Inplace",
+                    "to": "/inplace"
+                },
+                {
+                    "name": "ScrollTop",
+                    "to": "/scrolltop",
+                    "badge": "New"
+                },
+                {
+                    "name": "Skeleton",
+                    "to": "/skeleton",
+                    "badge": "New"
+                },
+                {
+                    "name": "ProgressBar",
+                    "to": "/progressbar"
+                },
+                {
+                    "name": "ProgressSpinner",
+                    "to": "/progressspinner"
+                },
+                {
+                    "name": "Ripple",
+                    "to": "/ripple"
+                },
+                {
+                    "name": "Tag",
+                    "to": "/tag",
+                    "badge": "New"
+                },
+                {
+                    "name": "Terminal",
+                    "to": "/terminal"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index b061e33fd..2b1d59109 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -1,286 +1,61 @@
 <template>
     <div :class="['layout-sidebar', {'active': active}]">
         <div class="layout-menu">
-            <div class="menu-category">Vue 2</div>
-            <div class="menu-items">
-                <a href="https://www.primefaces.org/primevue/showcase-v2" target="_blank">PrimeVue v2</a>
-            </div>
-            <div class="menu-category">General</div>
-            <div class="menu-items">
-                <router-link to="/setup">Get Started</router-link>
-                <a href="https://forum.primefaces.org/viewforum.php?f=110" target="_blank">Forum</a>
-                <a href="https://discord.gg/gzKFYnpmCY" target="_blank">Discord Chat</a>
-                <a href="https://github.com/primefaces/primevue" target="_blank">Source Code</a>
-                <router-link to="/support">Support</router-link>
-                <a href="https://www.primefaces.org/store" target="_blank">Store</a>
-                <router-link to="/locale">Locale <Tag value="New"></Tag></router-link>
-                <router-link to="/accessibility">Accessibility</router-link>
-            </div>
-
-            <div class="menu-category">Theming</div>
-            <div class="menu-items">
-                <router-link to="/theming">Guide</router-link>
-                <a href="https://www.primefaces.org/designer/primevue">Theme Designer</a>
-                <a href="https://www.primefaces.org/designer-vue">Visual Editor</a>
-                <a href="https://www.primefaces.org/designer/api/primevue/3.0.0">SASS API</a>
-            </div>
-
-            <div class="menu-category">PrimeFlex</div>
-            <div class="menu-items">
-                <router-link to="/primeflex">Setup</router-link>
-                <router-link to="/display">Display</router-link>
-                <router-link to="/elevation">Elevation</router-link>
-                <router-link to="/flexbox">FlexBox</router-link>
-                <router-link to="/formlayout">Form Layout</router-link>
-                <router-link to="/grid">Grid System</router-link>
-                <router-link to="/spacing">Spacing</router-link>
-                <router-link to="/text">Text</router-link>
-            </div>
-
-            <div class="menu-category">PrimeIcons</div>
-            <div class="menu-items">
-                <router-link to="/icons">Icons v4.0</router-link>
-            </div>
-
-            <div class="menu-category">Form</div>
-            <div class="menu-items">
-                <router-link to="/autocomplete">AutoComplete</router-link>
-                <router-link to="/calendar">Calendar</router-link>
-                <router-link to="/cascadeselect">CascadeSelect <Tag value="New"></Tag></router-link>
-                <router-link to="/checkbox">Checkbox</router-link>
-                <router-link to="/chips">Chips</router-link>
-                <router-link to="/colorpicker">ColorPicker</router-link>
-                <router-link to="/dropdown">Dropdown</router-link>
-                <router-link to="/editor">Editor</router-link>
-                <router-link to="/inputgroup">InputGroup</router-link>
-                <router-link to="/inputmask">InputMask</router-link>
-                <router-link to="/inputnumber">InputNumber</router-link>
-                <router-link to="/inputswitch">InputSwitch</router-link>
-                <router-link to="/inputtext">InputText</router-link>
-                <router-link to="/floatlabel">FloatLabel</router-link>
-                <router-link to="/knob">Knob <Tag value="New"></Tag></router-link>
-                <router-link to="/listbox">Listbox</router-link>
-                <router-link to="/multiselect">MultiSelect</router-link>
-                <router-link to="/password">Password</router-link>
-                <router-link to="/radiobutton">RadioButton</router-link>
-                <router-link to="/rating">Rating</router-link>
-                <router-link to="/selectbutton">SelectButton</router-link>
-                <router-link to="/slider">Slider</router-link>
-                <router-link to="/textarea">Textarea</router-link>
-                <router-link to="/togglebutton">ToggleButton</router-link>
-                <router-link to="/tristatecheckbox">TriStateCheckbox</router-link>
-            </div>
-
-            <div class="menu-category">Button</div>
-            <div class="menu-items">
-                <router-link to="/button">Button</router-link>
-                <router-link to="/splitbutton">SplitButton</router-link>
-            </div>
-
-            <div class="menu-category">Data</div>
-            <div class="menu-items">
-                <router-link to="/datatable" v-slot="{isActive}" custom>
-                    <div>
-                        <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
-                        <transition name="p-toggleable-content">
-                            <div class="p-toggleable-content" v-show="isSubmenuActive('datatable', isActive)">
-                                <ul>
-                                    <li><router-link to="/datatable">Documentation</router-link></li>
-                                    <li><router-link to="/datatable/basic">Basic</router-link></li>
-                                    <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
-                                    <li><router-link to="/datatable/templating">Templating</router-link></li>
-                                    <li><router-link to="/datatable/size">Size</router-link></li>
-                                    <li><router-link to="/datatable/gridlines">GridLines</router-link></li>
-                                    <li><router-link to="/datatable/striped">Striped</router-link></li>
-                                    <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
-                                    <li><router-link to="/datatable/paginator">Paginator</router-link></li>
-                                    <li><router-link to="/datatable/sort">Sort</router-link></li>
-                                    <li><router-link to="/datatable/filter">Filter</router-link></li>
-                                    <li><router-link to="/datatable/selection">Selection</router-link></li>
-                                    <li><router-link to="/datatable/lazy">Lazy</router-link></li>
-                                    <li><router-link to="/datatable/scroll">Scroll</router-link></li>
-                                    <li><router-link to="/datatable/flexscroll">FlexScroll</router-link></li>
-                                    <li><router-link to="/datatable/rowexpand">Expand</router-link></li>
-                                    <li><router-link to="/datatable/edit">Edit</router-link></li>
-                                    <li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
-                                    <li><router-link to="/datatable/colresize">ColResize</router-link></li>
-                                    <li><router-link to="/datatable/reorder">Reorder</router-link></li>
-                                    <li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
-                                    <li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
-                                    <li><router-link to="/datatable/responsive">Responsive</router-link></li>
-                                    <li><router-link to="/datatable/export">Export</router-link></li>
-                                    <li><router-link to="/datatable/state">State</router-link></li>
-                                    <li><router-link to="/datatable/style">Style</router-link></li>
-                                    <li><router-link to="/datatable/crud">Crud</router-link></li>
-                                </ul>
-                            </div>
-                        </transition>
-                    </div>
-                </router-link>
-
-                <router-link to="/dataview">DataView</router-link>
-                <router-link to="/fullcalendar">FullCalendar</router-link>
-                <router-link to="/orderlist">OrderList</router-link>
-                <router-link to="/organizationchart">OrganizationChart</router-link>
-                <router-link to="/paginator">Paginator</router-link>
-                <router-link to="/picklist">PickList</router-link>
-                <router-link to="/timeline">Timeline </router-link>
-                <router-link to="/tree" v-slot="{isActive}" custom>
-                    <div>
-                        <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
-                        <transition name="p-toggleable-content">
-                            <div class="p-toggleable-content" v-show="isSubmenuActive('tree', isActive)">
-                                <ul>
-                                    <li><router-link to="/tree">Documentation</router-link></li>
-                                    <li><router-link to="/tree/selection">Selection</router-link></li>
-                                    <li><router-link to="/tree/lazy">Lazy</router-link></li>
-                                    <li><router-link to="/tree/templating">Templating</router-link></li>
-                                    <li><router-link to="/tree/filter">Filter</router-link></li>
-                                </ul>
-                            </div>
-                        </transition>
-                    </div>
-                </router-link>
-                <router-link to="/treetable" v-slot="{isActive}" custom>
-                    <div>
-                        <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
-                        <transition name="p-toggleable-content">
-                            <div class="p-toggleable-content" v-show="isSubmenuActive('treetable', isActive)">
-                                <ul>
-                                    <li><router-link to="/treetable">Documentation</router-link></li>
-                                    <li><router-link to="/treetable/templating">Templating</router-link></li>
-                                    <li><router-link to="/treetable/size">Size</router-link></li>
-                                    <li><router-link to="/treetable/paginator">Paginator</router-link></li>
-                                    <li><router-link to="/treetable/sort">Sort</router-link></li>
-                                    <li><router-link to="/treetable/filter">Filter</router-link></li>
-                                    <li><router-link to="/treetable/selection">Selection</router-link></li>
-                                    <li><router-link to="/treetable/lazy">Lazy</router-link></li>
-                                    <li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
-                                    <li><router-link to="/treetable/colresize">Resize</router-link></li>
-                                    <li><router-link to="/treetable/responsive">Responsive</router-link></li>
-                                </ul>
-                            </div>
-                        </transition>
-                    </div>
-                </router-link>
-            </div>
-
-            <div class="menu-category">Panel</div>
-            <div class="menu-items">
-                <router-link to="/accordion">Accordion</router-link>
-                <router-link to="/card">Card</router-link>
-                <router-link to="/deferredcontent">Deferred</router-link>
-                <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
-                <router-link to="/fieldset">Fieldset</router-link>
-                <router-link to="/panel">Panel</router-link>
-                <router-link to="/splitter">Splitter <Tag value="New"></Tag></router-link>
-                <router-link to="/scrollpanel">ScrollPanel</router-link>
-                <router-link to="/tabview">TabView</router-link>
-                <router-link to="/toolbar">Toolbar</router-link>
-            </div>
-
-            <div class="menu-category">Overlay</div>
-            <div class="menu-items">
-                <router-link to="/confirmdialog">ConfirmDialog <Tag value="New"></Tag></router-link>
-                <router-link to="/confirmpopup">ConfirmPopup <Tag value="New"></Tag></router-link>
-                <router-link to="/dialog">Dialog</router-link>
-                <router-link to="/overlaypanel">OverlayPanel</router-link>
-                <router-link to="/sidebar">Sidebar</router-link>
-                <router-link to="/tooltip">Tooltip</router-link>
-            </div>
-
-            <div class="menu-category">File</div>
-            <div class="menu-items">
-                <router-link to="/fileupload">Upload</router-link>
-            </div>
-
-            <div class="menu-category">Menu</div>
-            <div class="menu-items">
-                <router-link to="/menumodel">MenuModel</router-link>
-                <router-link to="/breadcrumb">Breadcrumb</router-link>
-                <router-link to="/contextmenu">ContextMenu</router-link>
-                <router-link to="/megamenu">MegaMenu</router-link>
-                <router-link to="/menu">Menu</router-link>
-                <router-link to="/menubar">Menubar</router-link>
-                <router-link to="/panelmenu">PanelMenu</router-link>
-                <router-link to="/steps">Steps</router-link>
-                <router-link to="/tabmenu">TabMenu</router-link>
-                <router-link to="/tieredmenu">TieredMenu</router-link>
-            </div>
-
-            <div class="menu-category">Chart</div>
-            <div class="menu-items">
-                <router-link to="/chart">ChartModel</router-link>
-                <router-link to="/chart/pie">Pie</router-link>
-                <router-link to="/chart/doughnut">Doughnut</router-link>
-                <router-link to="/chart/bar">Bar</router-link>
-                <router-link to="/chart/line">Line</router-link>
-                <router-link to="/chart/polararea">PolarArea</router-link>
-                <router-link to="/chart/radar">Radar</router-link>
-                <router-link to="/chart/combo">Combo</router-link>
-            </div>
-
-            <div class="menu-category">Messages</div>
-            <div class="menu-items">
-                <router-link to="/message">Message</router-link>
-                <router-link to="/toast">Toast</router-link>
-            </div>
-
-            <div class="menu-category">Media</div>
-            <div class="menu-items">
-                <router-link to="/carousel">Carousel</router-link>
-                <router-link to="/galleria" v-slot="{isActive}" custom>
-                    <div>
-                        <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
-                        <transition name="p-toggleable-content">
-                            <div class="p-toggleable-content" v-show="isSubmenuActive('galleria', isActive)">
-                                <ul>
-                                    <li><router-link to="/galleria">Documentation</router-link></li>
-                                    <li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
-                                    <li><router-link to="/galleria/indicator">Indicator</router-link></li>
-                                    <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
-                                    <li><router-link to="/galleria/navigator">Navigator</router-link></li>
-                                    <li><router-link to="/galleria/responsive">Responsive</router-link></li>
-                                    <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
-                                    <li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
-                                    <li><router-link to="/galleria/caption">Caption</router-link></li>
-                                    <li><router-link to="/galleria/advanced">Advanced</router-link></li>
-                                </ul>
-                            </div>
-                        </transition>
-                    </div>
-                </router-link>
-            </div>
-
-            <div class="menu-category">Misc</div>
-            <div class="menu-items">
-                <router-link to="/avatar">Avatar <Tag value="New"></Tag></router-link>
-                <router-link to="/badge">Badge <Tag value="New"></Tag></router-link>
-                <router-link to="/chip">Chip <Tag value="New"></Tag></router-link>
-                <router-link to="/blockui">BlockUI</router-link>
-                <router-link to="/inplace">Inplace</router-link>
-                <router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
-                <router-link to="/skeleton">Skeleton <Tag value="New"></Tag></router-link>
-                <router-link to="/progressbar">ProgressBar</router-link>
-                <router-link to="/progressspinner">ProgressSpinner</router-link>
-                <router-link to="/ripple">Ripple</router-link>
-                <router-link to="/tag">Tag <Tag value="New"></Tag></router-link>
-                <router-link to="/terminal">Terminal</router-link>
-            </div>
+            <template v-for="item of menu" :key="item.name">
+                <div class="menu-category">{{item.name}}</div>
+                <div class="menu-items">
+                    <template v-for="child of item.children" :key="child.name">
+                        <a v-if="child.href" :href="child.href" target="_blank">{{child.name}}</a>
+                        <router-link v-if="child.to" :to="child.to">
+                            {{child.name}}
+                            <Tag v-if="child.badge" :value="child.badge"></Tag>
+                        </router-link>
+                        <template v-if="child.children">
+                           <router-link :to="child.meta[0]" v-slot="{isActive}" custom>
+                                <div>
+                                    <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
+                                    <transition name="p-toggleable-content">
+                                        <div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
+                                            <ul>
+                                                <li v-for="(submenuitem, i) of child.children" :key="i">
+                                                    <router-link :to="submenuitem.to">{{submenuitem.name}}</router-link>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </transition>
+                                </div>
+                            </router-link>
+                        </template>
+                    </template>
+                </div>
+            </template> 
         </div>
     </div>
 </template>
 
 <script>
+import MenuService from './service/MenuService';
+
 export default {
     props: {
         active: Boolean
     },
     data() {
         return {
-            activeSubmenus: {}
+            activeSubmenus: {},
+            menu: null
         }
     },
+    menuService: null,
+    created() {
+        this.menuService = new MenuService();
+    },
+    mounted() {
+        this.menuService.getMenu().then(data => {
+            this.menu = data;
+            this.filteredMenu = data;
+        })
+    },
     methods: {
         toggleSubmenu(event, name) {
             this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
@@ -295,7 +70,6 @@ export default {
                 this.activeSubmenus[name] = true;
                 return true;
             }
-
             return false;
         }
     }
diff --git a/src/service/MenuService.js b/src/service/MenuService.js
new file mode 100644
index 000000000..4f3ca26a2
--- /dev/null
+++ b/src/service/MenuService.js
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export default class MenuService {
+
+    getMenu() {
+        return axios.get('demo/menu/menu.json').then(res => res.data.data);
+    }
+}