Implemented panel menu

src/components/panelmenu/PanelMenu.vue

@@ -9,6 +9,13 @@
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </a>
                 </div>
+                <transition name="p-panelmenu-content-wrapper">
+                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                        <div class="p-panelmenu-content" v-if="item.items">
+                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" />
+                        </div>
+                    </div>
+                </transition>
             </div>
         </template>
     </div>
@@ -31,7 +38,26 @@ export default {
     },
     methods: {
         onItemClick(event, item) {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
 
+            if (!item.url) {
+                event.preventDefault();
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (this.activeItem && this.activeItem === item)
+                this.activeItem = null;
+            else
+                this.activeItem = item;
         },
         getPanelClass(item) {
             return ['p-panelmenu-panel', item.class, {'p-disabled': item.disabled}];
@@ -119,4 +145,24 @@ export default {
     display: block;
     text-decoration: none;
 }
+
+.p-panelmenu-content-wrapper-enter,
+.p-panelmenu-content-wrapper-leave-to {
+    max-height: 0;
+}
+
+.p-panelmenu-content-wrapper-enter-to,
+.p-panelmenu-content-wrapper-leave {
+    max-height: 1000px;
+}
+
+.p-panelmenu-content-wrapper-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-panelmenu-content-wrapper-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
 </style>

src/components/panelmenu/PanelMenuSub.vue

@@ -1,15 +1,71 @@
 <template>
-    <div class="p-panelmenu-panel">
+    <ul class="p-submenu-list">
-    </div>
+        <template v-for="(item, i) of model">
+            <li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
+                <router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
+                    <span :class="['p-menuitem-icon', item.icon]"></span>
+                    <span class="p-menuitem-text">{{item.label}}</span>
+                </router-link>
+                <a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
+                    <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
+                    <span :class="['p-menuitem-icon', item.icon]"></span>
+                    <span class="p-menuitem-text">{{item.label}}</span>
+                </a>
+                <transition name="p-panelmenu-content-wrapper">
+                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                        <sub-panelmenu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" />
+                    </div>
+                </transition>
+            </li>
+            <li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
+        </template>
+    </ul>
 </template>
 
 <script>
 export default {
+    name: 'sub-panelmenu',
     props: {
-		item: {
+		model: {
             type: null,
             default: null
         }
+    },
+    data() {
+        return {
+            activeItem: null
+        }
+    },
+    methods: {
+        onItemClick($event, item) {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (this.activeItem && this.activeItem === item)
+                this.activeItem = null;
+            else
+                this.activeItem = item;
+        },
+        getItemClass(item) {
+            return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
+        },
+        getSubmenuIcon(item) {
+            const active = (item === this.activeItem);
+            return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
+        }
     }
 }
 </script>