simplified menu system using PrimeVue components

Author: connorabbas

resources/js/Components/LinksMenu.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue';
+import Menu from 'primevue/menu';
+
+const childRef = ref(null);
+
+defineExpose({
+    childRef,
+});
+</script>
+
+<template>
+    <Menu ref="childRef">
+        <template #item="{ item, props }">
+            <Link
+                v-if="item.route"
+                :href="item.route"
+                class="p-menu-item-link"
+                custom
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-1" />
+                <span>{{ item.label }}</span>
+            </Link>
+            <a
+                v-else
+                :href="item.url"
+                :target="item.target"
+                v-bind="props.action"
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-1" />
+                <span>{{ item.label }}</span>
+            </a>
+        </template>
+    </Menu>
+</template>

resources/js/Components/LinksMenuBar.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from 'vue';
+import Menubar from 'primevue/menubar';
+
+const childRef = ref(null);
+
+defineExpose({
+    childRef,
+});
+</script>
+
+<template>
+    <Menubar ref="childRef">
+        <template v-if="$slots.start" #start>
+            <slot name="start"></slot>
+        </template>
+        <template #item="{ item, props, hasSubmenu, root }">
+            <Link
+                v-if="item.route"
+                :href="item.route"
+                class="p-menubar-item-link"
+                :class="
+                    item.active
+                        ? 'text-primary'
+                        : 'text-surface-700 dark:text-surface-0'
+                "
+                custom
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-1" />
+                <span>{{ item.label }}</span>
+            </Link>
+            <a
+                v-else
+                :href="item.url"
+                :target="item.target"
+                v-bind="props.action"
+                class="p-menubar-item-link"
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-1" />
+                <span>{{ item.label }}</span>
+                <i
+                    v-if="hasSubmenu"
+                    :class="[
+                        'pi pi-angle-down',
+                        {
+                            'pi-angle-down ml-2': root,
+                            'pi-angle-right ml-auto': !root,
+                        },
+                    ]"
+                ></i>
+            </a>
+        </template>
+        <template v-if="$slots.end" #end>
+            <slot name="end"></slot>
+        </template>
+    </Menubar>
+</template>

resources/js/Components/MobileNavLink.vue

@@ -0,0 +1,49 @@
+<script setup>
+import PanelMenu from 'primevue/panelmenu';
+</script>
+
+<template>
+    <PanelMenu
+        :pt="{
+            root: {
+                class: 'p-0 m-0 gap-1',
+            },
+            panel: {
+                class: 'p-0 border-0',
+            },
+            header: {
+                class: 'p-0 border-0',
+            },
+            itemContent: {
+                class: 'gap-1',
+            },
+        }"
+    >
+        <template #item="{ item }">
+            <Link
+                v-if="item.route"
+                :href="item.route"
+                custom
+                class="flex items-center cursor-pointer px-4 py-2"
+                :class="
+                    item.active
+                        ? 'text-primary'
+                        : 'text-surface-700 dark:text-surface-0'
+                "
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-2" />
+                <span>{{ item.label }}</span>
+            </Link>
+            <a
+                v-else
+                class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2"
+                :href="item.url"
+                :target="item.target"
+            >
+                <span v-show="item.icon" :class="item.icon" class="mr-2" />
+                <span>{{ item.label }}</span>
+                <span v-if="item.items" class="pi pi-angle-down ml-auto" />
+            </a>
+        </template>
+    </PanelMenu>
+</template>