Adding HeadlessUI dropdown menus - Trello Kanban

The lesson for building a dropdown menu using HeadlessUI can be found here.

[00:00] In this video we'll turn some of our buttons into dropdown menus, namely the user avatar and this three dots button that appears with every card list.

[00:12] We're going to start by installing HeadlessUI. So I'll do npm install @headlessui/vue. Now, we're not going to build the dropdown menus from scratch because, guess what - I already have a video on that. Which means I can go to tallpad.com, search for "dropdown", and here it is: "building a drop down menu with headless ui".

[00:37] I'll open this, go to code, and here it is! I can grab this part, go to my project, find, let's say, let's start with those three dots from the card list, paste it in. I'll go and grab the components we need to import, paste these in, and now we need to replace this image with the three dots, and we should also grab the button classes. I'll save, refresh, and if I click on this button, here it is.

[01:27] But we need to increase the z-index, so I'll go here, and say z-10, and here it is. However, it would be nice to have the menu open more to the right. We can change that by going to this MenuItems, we'll change the origin top right to origin top left, and then we have a right-0 class which we need to set to left-0, and here it is.

[02:01] I'll delete some of these menu items and only keep two. I'll keep add card, and another one for delete card list or delete list. Let's make this red since is a destructive action. So I'll do text-red-600, and maybe make the list narrower. I'll go here and say with 40, 32, now let's leave it 40. Okay, let's move on to the avatar dropdown, I'll go back to tallpad, copy the menu again, find the avatar; which is here, paste this in. Let's grab the image, this one, replace this one, and then the bottom class which just says ml-3, paste that in, save, and to align these we need to turn the nav into a flex. So I'll do flex item-center. Let's test it out, and here it is.

[03:34] Oh, we also need to increase that z-index as well. So I'll do z-10. That's better, and let's replace this black focus ring with a blue one. So I'll go here, and say blue-400 - that's better. I'll remove some of the menu items and will only keep my profile, and logout. Let's check them out in a bigger window, I'll refresh, we have the card list dropdown menu and the avatar dropdown menu.