working on UserCreate form...

resources/js/pages/Users/Create.vue

@@ -1,22 +1,33 @@
 <template>
-    <div class="flex justify-between mb-2">
-        <n-button
+    <UserNav
+        @clickBack="() => { router.get('/users') }"
+    />
 
-        >
-
-        </n-button>
-        <n-button
-        >
-        Speichern
-        </n-button>
-    </div>
+    <UserForm
+        :userModel="form"
+        
+    />
     
 </template>
 
 <script setup>
 import BELayout from '@/layouts/BELayout.vue'
-import UserForm from '@/components/UserForm.vue'
+import UserForm from '@/components/Users/UserForm.vue'
+import UserNav from '@/components/Users/UserNav.vue'
+
+import { router, useForm } from '@inertiajs/vue3'
 import { renderIcon } from '@/util'
+import {
+    ArrowBackRound as Back,
+    SaveRound as Save
+} from '@vicons/material'
 
 defineOptions({ layout: BELayout })
+
+const form = useForm({
+    username: null,
+    password: null,
+    is_admin: false,
+    password_repeat: null,
+})
 </script>

resources/js/pages/Users/Edit.vue

@@ -1,9 +1,8 @@
 <template>
-    <n-menu 
-        mode="horizontal"
-        :options="menuOptions"
-        class="-mx-4"
+    <UserNav
+        @clickBack="() => { router.get('/users') }"
     />
+
     <n-form
         :model="userModel"
         label-placement="left"
@@ -48,7 +47,10 @@
 <script setup>
 
 import BELayout from '@/layouts/BELayout.vue'
-import { Link } from '@inertiajs/vue3'
+import UserNav from '@/components/Users/UserNav.vue'
+
+import { router } from '@inertiajs/vue3'
+import { renderIcon } from '@/util'
 import { h, reactive } from 'vue'
 import { NIcon } from 'naive-ui'
 import {
@@ -63,19 +65,4 @@ const props = defineProps(['user'])
 
 const userModel = reactive(props.user)
 
-const menuOptions = [
-    {
-        label: () => 
-            h(
-                Link,
-                {
-                    href: "/users",
-                    method: "get",
-                }, 
-                () => "Zurück"
-            ),
-            key: 'back',
-            icon: () => h(NIcon, { component: Back }),
-    }
-]
 </script>