scrum-poker-internal/resources/js/layouts/PublicLayout.vue

    <script setup>
    import { ref } from 'vue'

    const navigation = [
        { name: 'Product', href: '#' },
        { name: 'Features', href: '#' },
        { name: 'Marketplace', href: '#' },
        { name: 'Company', href: '#' },
    ]

    const mobileMenuOpen = ref(false)
</script>
<template>
    <div class="min-h-svh bg-gray-900">
        <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">
                        <a v-for="item in navigation" :key="item.name" :href="item.href"
                            class="text-sm/6 font-semibold text-white">{{ item.name }}</a>
                    </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>
        </header>

        <main>
            <slot />
        </main>
    </div>
</template>