Initial commit

src/layout/AppMenuItem.vue

@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+    item: {
+        type: Object,
+        default: () => ({})
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    root: {
+        type: Boolean,
+        default: true
+    },
+    active: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<template>
+    <li :class="{ 'layout-root-menuitem': root, 'active-menuitem': active }">
+        <div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
+        <a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event)" :class="item.class" :target="item.target" tabindex="0">
+            <i :class="item.icon" class="layout-menuitem-icon"></i>
+            <span class="layout-menuitem-text">{{ item.label }}</span>
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
+        </a>
+        <a v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="item.class" tabindex="0" :to="item.to">
+            <i :class="item.icon" class="layout-menuitem-icon"></i>
+            <span class="layout-menuitem-text">{{ item.label }}</span>
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
+        </a>
+        <ul v-if="item.items && item.visible !== false">
+            <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
+        </ul>
+    </li>
+</template>
+
+<style lang="scss" scoped></style>