added main navigation

components.d.ts

@@ -11,5 +11,6 @@ declare module 'vue' {
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NInput: typeof import('naive-ui')['NInput']
+    NMenu: typeof import('naive-ui')['NMenu']
   }
 }

resources/js/Layouts/BELayout.vue

@@ -1,10 +1,12 @@
 <template>
-    <main class="bg-slate-100 flex justify-center h-screen">
-        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
-            <slot></slot>
-        </div>
-    </main>
+    <LoginLayout>
+        <MainNav />
+        <slot></slot>
+
+    </LoginLayout>
 </template>
 
-<script lang="ts" setup>
+<script setup>
+    import LoginLayout from '@/layouts/LoginLayout'
+    import MainNav from '@/components/MainNav'
 </script>

resources/js/Layouts/LoginLayout.vue

@@ -0,0 +1,7 @@
+<template>
+    <main class="bg-slate-100 flex justify-center h-screen">
+        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
+            <slot></slot>
+        </div>
+    </main>
+</template>

resources/js/components/MainNav.vue

@@ -0,0 +1,61 @@
+<template>
+    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
+</template>
+
+<script setup>
+    import { Link } from '@inertiajs/vue3'
+    import { h, ref } from 'vue';
+    import { NIcon, NButton } from 'naive-ui'
+    import {
+        GroupsFilled as Users,
+        EventNoteFilled as Events,
+        LogOutFilled as Logout
+    } from '@vicons/material'
+
+    const activeKey = ref(null)
+
+    const menuOptions = ref([
+        {
+            label: () =>
+                h(
+                    Link, {
+                        href: "/Events",
+                        methode: "get"
+                    },
+                    "Veranstaltungen"
+                ),
+                key: 'go-to-events',
+                icon: renderIcon(Events)
+        },
+        {
+            label: () =>
+                h(
+                    Link, {
+                        href: "/Users",
+                        method: "get"
+                    },
+                    "Benutzer"
+                ),
+                key: 'go-to-users',
+                icon: renderIcon(Users)
+        },
+        {
+            label: () =>
+                h(
+                    Link, {
+                        href: "/Login",
+                        method: "get"
+                    },
+                    "Abmelden"
+                ),
+                key: 'go-to-logout',
+                icon: renderIcon(Logout)
+        }
+    ])
+
+    function renderIcon(icon) {
+        return () => h(NIcon, null, { default: () => h(icon) })
+
+    }
+
+</script>

resources/js/pages/Events/EventForm.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

resources/js/pages/Events/EventsList.vue

@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script setup>
+
+import BELayout from '@/layouts/BELayout.vue'
+import MainNav from '@/components/MainNav.vue'
+
+defineOptions({ layout: BELayout })
+
+</script>

resources/js/pages/Events/List.vue

@@ -1,11 +0,0 @@
-<template>
-
-</template>
-
-<script setup>
-
-import BELayout from '@/Layouts/BELayout.vue'
-
-defineOptions({ layout: BELayout })
-
-</script>

resources/js/pages/Login.vue

@@ -1,6 +1,5 @@
 <template>
-    <h1 class="text-center text-lg font-bold">Login</h1>
-    
+  
     <n-form  
         label-placement="top"
         :model="formValue"
@@ -14,7 +13,7 @@
             <n-input v-model:value="formValue.password" placeholder="Passwort"></n-input>
         </n-form-item>
         <div class="flex justify-center">
-            <n-button class="bg-[#18A058]" type="success" @click="onClickLogin">Einloggen</n-button>
+            <n-button class="bg-[#18A058]" type="success" @click="onClickLogin">Anmelden</n-button>
         </div>
     </n-form>
 </template>
@@ -22,9 +21,9 @@
 <script setup>
     import { ref } from 'vue'
     import { router } from '@inertiajs/vue3'
-    import BELayout from '@/Layouts/BELayout.vue'
+    import LoginLayout from '@/layouts/LoginLayout.vue'
 
-    defineOptions({ layout: BELayout })
+    defineOptions({ layout: LoginLayout })
 
     const formRef = ref(null)
     const formValue = ref({

resources/js/pages/Users/UserForm.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

resources/js/pages/Users/UsersList.vue

@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script setup>
+
+import BELayout from '@/layouts/BELayout.vue'
+import MainNav from '@/components/MainNav.vue'
+
+defineOptions({ layout: BELayout })
+
+</script>

start/routes.ts

@@ -29,5 +29,9 @@ Route.get('/Login', async({inertia}) =>{
 })
 
 Route.get('/Events', async({inertia})=> {
-  return inertia.render('Events/List')
+  return inertia.render('Events/EventsList')
+})
+
+Route.get('/Users', async({inertia}) => {
+  return inertia.render('Users/UsersList')
 })