Samurai Legend Posted November 24 Share Posted November 24 <template> <div class="min-h-full"> <Disclosure as="nav" class="bg-gray-800" v-slot="{ open }"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="flex h-16 items-center justify-between"> <div class="flex items-center"> <div class="shrink-0"> <img class="size-8" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500" alt="Site Logo" /> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-4"> <Link v-if="$page.props.auth.user" v-for="item in authNavigation" :key="item.name" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</Link> <Link v-if="!$page.props.auth.user" v-for="item in navigation" :key="item.name" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</Link> </div> </div> </div> <div class="hidden md:block"> <div class="ml-4 flex items-center md:ml-6"> <button v-if="$page.props.auth.user" type="button" class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"> <span class="absolute -inset-1.5" /> <span class="sr-only">View notifications</span> <BellIcon class="size-6" aria-hidden="true" /> </button> <Menu v-if="$page.props.auth.user" as="div" class="relative ml-3"> <div> <MenuButton class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"> <span class="absolute -inset-1.5" /> <span class="sr-only">Open user menu</span> <img class="size-8 rounded-full" :src="user.imageUrl" alt="" /> </MenuButton> </div> <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95"> <MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"> <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }"> <Link :href="item.href" :method="$item.method" :as="$item.as" :type="$item.type" :class="[active ? 'bg-gray-100 outline-none' : '', 'block px-4 py-2 text-sm text-gray-700']" >{{ item.name }}</Link> </MenuItem> </MenuItems> </transition> </Menu> </div> </div> <div class="-mr-2 flex md:hidden"> <!-- Mobile menu button --> <DisclosureButton class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"> <span class="absolute -inset-0.5" /> <span class="sr-only">Open main menu</span> <Bars3Icon v-if="!open" class="block size-6" aria-hidden="true" /> <XMarkIcon v-else class="block size-6" aria-hidden="true" /> </DisclosureButton> </div> </div> </div> <DisclosurePanel class="md:hidden"> <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3"> <DisclosureButton v-if="$page.props.auth.user" v-for="item in authNavigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton> <DisclosureButton v-if="!$page.props.auth.user" v-for="item in navigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton> </div> <div v-if="$page.props.auth.user" class="border-t border-gray-700 pb-3 pt-4"> <div class="flex items-center px-5"> <div class="shrink-0"> <img class="size-10 rounded-full" :src="user.imageUrl" alt="" /> </div> <div class="ml-3"> <div class="text-base/5 font-medium text-white">{{ $page.props.auth.user.name }}</div> <div class="text-sm font-medium text-gray-400">{{ $page.props.auth.user.email }}</div> </div> <button type="button" class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"> <span class="absolute -inset-1.5" /> <span class="sr-only">View notifications</span> <BellIcon class="size-6" aria-hidden="true" /> </button> </div> <div v-if="$page.props.auth.user" class="mt-3 space-y-1 px-2"> <DisclosureButton v-for="item in userNavigation" :key="item.name" as="a" :href="item.href" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">{{ item.name }}</DisclosureButton> </div> </div> </DisclosurePanel> </Disclosure> <header class="bg-white shadow"> </header> <main> <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8"> <slot></slot> </div> <footer class="bg-white rounded-lg shadow dark:bg-gray-900 m-4"> <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8"> <div class="sm:flex sm:items-center sm:justify-between"> <a href="https://flowbite.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"> <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" /> <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span> </a> <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400"> <li> <a href="#" class="hover:underline me-4 md:me-6">About</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Licensing</a> </li> <li> <a href="#" class="hover:underline">Contact</a> </li> </ul> </div> <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" /> <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.</span> </div> </footer> </main> </div> </template> <script setup> import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue' import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline' const user = { name: 'Tom Cook', email: '[email protected]', imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', } const navigation = [ { name: 'Home', href: '/'}, { name: 'About', href: '/about'}, { name: 'Login', href: '/login'}, { name: 'Register', href: '/register'}, ] const authNavigation = [ { name: 'Home', href: '/'}, { name: 'About', href: '/about'}, ] const userNavigation = [ { name: 'Your Profile', href: '#' }, { name: 'Settings', href: '#' }, { name: 'Logout', href: '/logout', method: "post", as: "button", type: "button" }, ] </script> const userNavigation = [ { name: 'Your Profile', href: '#' }, { name: 'Settings', href: '#' }, { name: 'Logout', href: '/logout', method: "post", as: "button", type: "button" }, ] <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }"> <Link :href="route('{item.href}')" :method="$item.method" :as="$item.as" :type="$item.type" :class="[active ? 'bg-gray-100 outline-none' : '', 'block px-4 py-2 text-sm text-gray-700']" >{{ item.name }}</Link> </MenuItem> I've tried adding in a log out link which requires a POST method. Now I am using a const to create my navigation so I've tried doing this and it does not display an error. The menu pop up doesn't happen Quote Link to comment Share on other sites More sharing options...
rockwood Posted November 25 Share Posted November 25 <script> export default { data() { return { userNavigation: [ { name: 'Your Profile', href: '/profile' }, { name: 'Settings', href: '/settings' }, { name: 'Logout', href: '/logout', method: 'post', as: 'button', type: 'button' }, ], isMenuOpen: false, // Toggle for dropdown menu }; }, methods: { toggleMenu() { this.isMenuOpen = !this.isMenuOpen; }, closeMenu() { this.isMenuOpen = false; }, }, }; </script> <template> <div class="relative"> <!-- Trigger Button --> <button @click="toggleMenu" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md focus:outline-none"> Menu </button> <!-- Dropdown Menu --> <div v-if="isMenuOpen" @click.outside="closeMenu" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" > <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }"> <Link :href="item.href" :method="item.method" :as="item.as" :type="item.type" :class="[active ? 'bg-gray-100 outline-none' : '', 'block px-4 py-2 text-sm text-gray-700']" > {{ item.name }} </Link> </MenuItem> </div> </div> </template> <style> /* Add custom styles as necessary */ </style> try this way Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.