From bc38291696146856a55161159d60dc11062da61e Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 2 Jul 2023 13:56:28 +0200
Subject: [PATCH] added main navigation

---
 components.d.ts                          |  1 +
 resources/js/Layouts/BELayout.vue        | 14 +++---
 resources/js/Layouts/LoginLayout.vue     |  7 +++
 resources/js/components/MainNav.vue      | 61 ++++++++++++++++++++++++
 resources/js/pages/Events/EventForm.vue  |  3 ++
 resources/js/pages/Events/EventsList.vue | 12 +++++
 resources/js/pages/Events/List.vue       | 11 -----
 resources/js/pages/Login.vue             |  9 ++--
 resources/js/pages/Users/UserForm.vue    |  3 ++
 resources/js/pages/Users/UsersList.vue   | 12 +++++
 start/routes.ts                          |  6 ++-
 11 files changed, 116 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/Layouts/LoginLayout.vue
 create mode 100644 resources/js/components/MainNav.vue
 create mode 100644 resources/js/pages/Events/EventForm.vue
 create mode 100644 resources/js/pages/Events/EventsList.vue
 delete mode 100644 resources/js/pages/Events/List.vue
 create mode 100644 resources/js/pages/Users/UserForm.vue
 create mode 100644 resources/js/pages/Users/UsersList.vue

diff --git a/components.d.ts b/components.d.ts
index 393d330..b165ab7 100644
--- a/components.d.ts
+++ b/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']
   }
 }
diff --git a/resources/js/Layouts/BELayout.vue b/resources/js/Layouts/BELayout.vue
index a010bba..fcfe605 100644
--- a/resources/js/Layouts/BELayout.vue
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/Layouts/LoginLayout.vue b/resources/js/Layouts/LoginLayout.vue
new file mode 100644
index 0000000..0bec86b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/components/MainNav.vue b/resources/js/components/MainNav.vue
new file mode 100644
index 0000000..528918b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/pages/Events/EventForm.vue b/resources/js/pages/Events/EventForm.vue
new file mode 100644
index 0000000..27e0f69
--- /dev/null
+++ b/resources/js/pages/Events/EventForm.vue
@@ -0,0 +1,3 @@
+<template>
+    
+</template>
\ No newline at end of file
diff --git a/resources/js/pages/Events/EventsList.vue b/resources/js/pages/Events/EventsList.vue
new file mode 100644
index 0000000..d65dca5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/pages/Events/List.vue b/resources/js/pages/Events/List.vue
deleted file mode 100644
index 2dbfb27..0000000
--- a/resources/js/pages/Events/List.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-
-</template>
-
-<script setup>
-
-import BELayout from '@/Layouts/BELayout.vue'
-
-defineOptions({ layout: BELayout })
-
-</script>
\ No newline at end of file
diff --git a/resources/js/pages/Login.vue b/resources/js/pages/Login.vue
index afbda98..c91cc4d 100644
--- a/resources/js/pages/Login.vue
+++ b/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({
diff --git a/resources/js/pages/Users/UserForm.vue b/resources/js/pages/Users/UserForm.vue
new file mode 100644
index 0000000..27e0f69
--- /dev/null
+++ b/resources/js/pages/Users/UserForm.vue
@@ -0,0 +1,3 @@
+<template>
+    
+</template>
\ No newline at end of file
diff --git a/resources/js/pages/Users/UsersList.vue b/resources/js/pages/Users/UsersList.vue
new file mode 100644
index 0000000..d65dca5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/start/routes.ts b/start/routes.ts
index 40e5cd7..d4acda9 100644
--- a/start/routes.ts
+++ b/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')
 })
\ No newline at end of file