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