show user first impl.

resources/js/components/MainNav.vue

@@ -7,26 +7,34 @@
     />
 </template>
 
-<script setup>
+<script lang="ts" setup>
     import { Link, usePage } from '@inertiajs/vue3'
-    import { h, ref, watch } from 'vue';
-    import { NIcon, NButton } from 'naive-ui'
+    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
+        LogOutFilled as Logout,
+        SettingsRound as Settings,
+        PersonRound as Profile,
     } from '@vicons/material'
 
-    const { request, isAdmin } = usePage().props
-    const activeKey = ref(request.url)
+    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 = ref([])
-    menuOptions.value.push({
+    const menuOptions: MenuOption[] = []
+
+    menuOptions.push({
         label: () =>
             h(
                 Link, {
                     href: "/events",
-                    methode: "get"
+                    method: "get"
                 },
                 () => "Veranstaltungen"
             ),
@@ -34,7 +42,7 @@
             icon: renderIcon(Events)
     })
 
-    if(isAdmin) menuOptions.value.push({
+    if(user.is_admin) menuOptions.push({
         label: () => 
             h(
                 Link, {
@@ -47,9 +55,25 @@
             icon: renderIcon(Users)
     })
 
-    menuOptions.value.push({
-        label: () =>
-            h(
+    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",
@@ -59,11 +83,15 @@
             ),
             key: '/logout',
             icon: renderIcon(Logout)
+        }]
+    })
+    menuOptions.push({
+        
     })
 
     
 
-    function renderIcon(icon) {
+    function renderIcon(icon: Component) {
         return () => h(NIcon, null, { default: () => h(icon) })
 
     }