94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex justify-center">
|
|
<n-menu
|
|
v-model:value="activeKey"
|
|
mode="horizontal"
|
|
:options="menuOptions"
|
|
class="-mx-4"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { renderIcon } from '@/util'
|
|
import { NIcon } from 'naive-ui'
|
|
import { Link, usePage } from '@inertiajs/vue3'
|
|
import { h, ref } from 'vue';
|
|
import {
|
|
GroupsFilled as Users,
|
|
EventNoteFilled as Events,
|
|
LogOutFilled as Logout,
|
|
SettingsRound as Settings,
|
|
PersonRound as Profile,
|
|
} from '@vicons/material'
|
|
|
|
const activeKey= ref(usePage().props.request?.url)
|
|
const user = usePage().props.user
|
|
|
|
const menuOptions = []
|
|
|
|
menuOptions.push({
|
|
label: () =>
|
|
h(
|
|
Link, {
|
|
href: "/events",
|
|
method: "get"
|
|
},
|
|
() => "Veranstaltungen"
|
|
),
|
|
key: '/events',
|
|
icon: () => { return renderIcon(Events) }
|
|
})
|
|
|
|
if(user.is_admin) menuOptions.push({
|
|
label: () =>
|
|
h(
|
|
Link, {
|
|
href: "/users",
|
|
method: "get"
|
|
},
|
|
() => "Benutzer"
|
|
),
|
|
key: '/users',
|
|
icon: () => { return renderIcon(Users) }
|
|
})
|
|
|
|
menuOptions.push({
|
|
label: "Einstellungen",
|
|
key: "einstellungen",
|
|
icon: () => { return renderIcon(Settings) },
|
|
children: [{
|
|
label: () => h(
|
|
Link, {
|
|
href: "/users/"+user.id,
|
|
method: "get",
|
|
as: "button"
|
|
},
|
|
() => "Mein Profil"
|
|
),
|
|
key: 'profile',
|
|
icon: () => { return renderIcon(Profile) }
|
|
|
|
},
|
|
{
|
|
label: () => h(
|
|
Link, {
|
|
href: "/logout",
|
|
method: "post",
|
|
as: "button"
|
|
},
|
|
() => "Abmelden"
|
|
),
|
|
key: '/logout',
|
|
icon: () => { return renderIcon(Logout) }
|
|
}]
|
|
})
|
|
|
|
|
|
|
|
/*function renderIcon(icon) {
|
|
return () => h(NIcon, null, { default: () => h(icon) })
|
|
|
|
}*/
|
|
|
|
</script> |