feat: some fixes to the ui, imlemented user and guest user, ans used the dahboard

resources/js/layouts/PublicLayout.vue

@@ -1,35 +1,56 @@
-    <script setup>
-    import { ref } from 'vue'
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { dashboard, home, login, logout, register } from '@/routes';
 
-    const navigation = [
-    ]
-
-    const mobileMenuOpen = ref(false)
+const page = usePage();
+const user = computed(() => page.props.auth.user);
 </script>
+
 <template>
-    <div class="min-h-svh bg-gray-900">
+    <div class="min-h-svh bg-gray-900 text-white">
         <header class="border-b border-white/10">
-            <nav class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6" aria-label="Global">
-                <nav class="flex items-center w-full justify-between p-6 lg:px-8" aria-label="Global">
-                    <div class="flex lg:flex-1">
-                        <a href="#" class="-m-1.5 p-1.5">
-                            <span class="sr-only">Your Company</span> </a>
-                    </div>
-                    <div class="flex lg:hidden">
-                        <button type="button"
-                            class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
-                            @click="mobileMenuOpen = true">
-                            <span class="sr-only">Open main menu</span>
-                        </button>
-                    </div>
-                    <div class="hidden lg:flex lg:gap-x-12">
-                        <h1 class="font-extrabold text-2xl">Scrum Poker</h1>
-                    </div>
-                    <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-                        <a href="#" class="text-sm/6 font-semibold text-white">Log in <span
-                                aria-hidden="true">&rarr;</span></a>
-                    </div>
-                </nav>
+            <nav
+                class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6"
+                aria-label="Hauptnavigation"
+            >
+                <Link :href="home()" class="text-xl font-extrabold">
+                    Scrum Poker
+                </Link>
+
+                <div class="flex items-center gap-4 text-sm font-semibold">
+                    <template v-if="user">
+                        <Link
+                            :href="dashboard()"
+                            class="text-gray-200 transition hover:text-white"
+                        >
+                            Meine Räume
+                        </Link>
+                        <Link
+                            :href="logout()"
+                            method="post"
+                            as="button"
+                            class="rounded-lg border border-white/15 px-3 py-2 text-gray-200 transition hover:bg-white/10 hover:text-white"
+                        >
+                            Abmelden
+                        </Link>
+                    </template>
+
+                    <template v-else>
+                        <Link
+                            :href="login()"
+                            class="text-gray-200 transition hover:text-white"
+                        >
+                            Anmelden
+                        </Link>
+                        <Link
+                            :href="register()"
+                            class="rounded-lg bg-white px-3 py-2 text-gray-900 transition hover:bg-gray-100"
+                        >
+                            Registrieren
+                        </Link>
+                    </template>
+                </div>
             </nav>
         </header>
 
@@ -38,4 +59,3 @@
         </main>
     </div>
 </template>
-