Redesign a Dropdown List for Mobile with Tailwind

Adam Wathan: [0:00] Right now, our current dropdown component looks really good at desktop sizes but, when we drop back down to the mobile size, things are a bit of a mess here. What's the best way for us to display this content on smaller screens?

[0:13] I would argue that actually using a dropdown like this at all is probably not the optimal treatment, especially since you actually have to open this responsive nav bar to even get to the dropdown in the first place.

[0:24] Since all of this content is hidden by default, I think maybe a better approach would be to always show these links in this responsive dropdown, maybe in a separate list underneath the main navigation links.

[0:35] How can we pull this off? There's two ways that I can think to do it. One would be to do whatever it takes, by any means necessary, manipulate these utility classes adding all sorts of responsive stuff to try and display this content when basically a completely different visual treatment on mobile.

[0:51] While that can often be the best approach, I often find that when you're trying to implement two completely different designs for the same piece of content, it's actually a lot more practical to duplicate that content, so you can lay it out in style of however you want and then just toggle between the two separate implementations, instead of trying to add a ton of utility classes to all of the different elements to try and reuse this markup by any means necessary.

[1:14] The approach I'm going to take in this lesson is duplicating all of this content and styling it as a completely separate instance so we have maximum control.

[1:23] I'm going to start by pasting what we have before underneath the account dropdown here. Cleanup our indentation a little bit, and maybe remove a bunch of these classes so we have more of a fresh starting point.

[1:35] Actually, the first thing is this big overlay. We're not going to need that at all, so let's just delete that entirely. This VF is open. We're going to show these links permanently so we don't need to conditionally hide them.

[1:47] Same with this button up here. Clicking this originally opened the dropdown.

[1:50] I think here, since we're going to display everything all the time, this doesn't even really need to be a button, because it doesn't even need to be clickable. So, let's just make this a div, and let's get rid of all the classes on the dropdown area and on each one of these links so we have a bit of a fresh starting point.

[2:06] Next, I'm going to make it so this dropdown is always open by default so we don't have to waste any time clicking it and opening and closing it all the time.

[2:14] I can see we have two instances of the avatar over here, and that's because we're still showing the original account dropdown and the duplicated content.

[2:22] Let's make sure that this account dropdown is only shown on small screens and above since that's where we're actually showing this full horizontal menu layout. Let's set this to be SM block and hidden by default.

[2:36] Since this left margin is only going to take effect when it's visible, let's throw an SM prefix in front of that, just to be a little bit more clear about our intentions.

[2:43] Next, let's get these links showing up. Right now, they're using a dark color so they're hard to see here. Let's give them a lighter default text color, maybe something like text-gray-400 so we can actually see them.

[2:55] I actually like they're a little bit softer-looking than these links since they are secondary links, which is why we had them hidden behind that dropdown in the first place.

[3:04] Next, let's set them all to display block so they stack like the links above.

[3:08] Since we don't have this image as a button anymore, we can simplify some of this stuff. I think we can move some of the classes that are on this div directly to the image, and we don't really have to worry about stuff like this relative and z-10 stuff, or even this block class, since divs are block level by default.

[3:24] Let's get rid of this stuff and we'll add the H8 W8 rounded for stuff directly onto the image, which means we can get rid of them here. I'm pretty sure we'll be able to get rid of overflow hidden, since we're going to be sizing the image directly now.

[3:39] This border stuff, I think we can move that directly to the image as well too. I'm going to drop that down here, get rid of what we have here.

[3:48] Then these focus style. Since it isn't button that's actually focusable at all anymore, let's just get rid of those, and now we have an empty class list for this div to start.

[3:57] The avatar actually looks exactly the same as it did before, so we're in good shape.

[4:01] The next thing I want to do is create a little bit of separation between this section down here and the list of links above. Maybe we can add a subtle border between the two sections to separate them.

[4:11] Why don't we try adding a top border to this div? Maybe we'll do like border-T, see what that looks like. It's really light, which I think is probably a little too high contrast, so why don't we soften that border a bit?

[4:23] Maybe we'll go like, border-gray-600. That's still a little bit light. Let's try 800. Yeah, I like that. It's really nice and subtle.

[4:31] One thing I don't like about what we've done here is the border doesn't go all the way to the edge. There's a little bit of a gap here. I would like the border to go all the way to the edge, so how can we pull that off?

[4:42] The problem right now, the reason that it's not going to the edge is because we have this horizontal padding on this nav element which is wrapping up everything. If we want this border to go all the way to the edge, we actually have to make sure that we're only adding padding around to some sort of container holding these links.

[4:59] What I'm going to do is I'm going to create a new div to hold all the main navigational links, and then we can move some of these styles over.

[5:09] Looking at this, I think we can probably grab all of these styles, because it's just like padding, setting the display property, and then undoing some padding.

[5:17] Let's grab all this stuff. We'll add a class here, and then we'll empty out this class list and make sure that things look the same. The top looks the same, which is what we wanted. But now, this border goes all the way to the edge, and we no longer have any padding around this section. We're free to do what we want with it.

[5:36] Why don't we start by adding some horizontal padding? This relative class is we're not doing anything with absolute positioning or anything like that anymore. We don't need this at all. I'm going to swap this out for px-4.

[5:49] If you look up here, we have px-2 on this container, and then we have px-2 on each item. We have a total of a 4 spacing right here. Let's go with 4 to try and get things lined up. You can see now everything is left aligned.

[6:05] If we wanted to do this background treatment on these links as well, we'd probably want to use px-2 and do the same thing. We'll explore a slightly different treatment for these links to add a little bit of variety to the UI.

[6:17] Next, what about the vertical spacing? Right now, everything is butted up right against the top and bottom. That's probably not good. Let's experiment with a few different sizes and see what looks best. I'm going to try py-4 to start and see what that looks like. That's not too bad.

[6:33] You can see here that the gap between messages in the border is a little bit bigger than the gap between the avatar and the border. Things look a little bit unbalanced to me. That's because messages has its own padding around the actual link as well.

[6:47] Why don't we bump this up to py-6, see what that looks like? That's pretty close. A little bit too much. What about py-5? Py-5 is pretty good. What about the spacing between the avatar and the links, and the space between the links themselves?

[7:02] Why don't we start by spacing out these links a little bit? Why don't we start with something like mt-1, see what that looks like? Even mt-2 is probably good. A little bit more. That looks good to me.

[7:13] The spacing between account settings and the avatar is currently . Why don't we try mt-2 there and see what that looks like? It looks a little bit tight. I expected that to work.

[7:24] What we're seeing with our eyes is that because this avatar is its own section, and these links are their own section, it might look better for the space between the links to be a little bit tighter than the space between the avatar and the first link. They feel like two discrete sections.

[7:41] Why don't we bump this up to mt-4? That looks a little bit better. What about our hover treatment for these links? You can see right now, nothing happens, whereas up here, we've got this cool background highlight treatment.

[7:54] Since we're using a softer text color here, why don't we try going to white text on hover? It would have a subtler treatments, but it will probably look pretty good. Let's give it a try. Hover text white. This time when we hover, you get a little bit of a change. You can tell which one is receiving the hover, but nothing too extreme.

[8:15] Finally, with this layout, one thing that we could improve is, right now, this avatar is up here by itself, taking up space, but we've got all this leftover space over here. We could probably do something useful with that. We can show the person's name, email address, or something like that.

[8:34] We didn't really have room for that on the desktop layout. Here, we could put some useful information there. Why don't we try adding a span after this image? We'll put the user's name there, like Jane Doe or something in this case. Let's make this visible by giving it a color. We'll do text white so we can see it.

[8:52] Since we want it next to the avatar, we're going to want to use Flexbox, so we can put these two things next to each other. Let's make this display flex items center, so that they're next to each other and centered. We'll make the username a little bit bolder, so it feels like a title for this section. Let's try semi-bold. That looks pretty good.

[9:10] Let's add a little bit of left margin to space it out a little bit from that image, like ml-2. That's a little bit tight. What about ml-4? That's a little bit too much. Let's try ml-3. Ml-3 looks pretty good. Let's check this out at our different screen sizes and see if we've made any mistakes or forgotten anything.

[9:27] If we open and close this, it looks pretty good on mobile. Let's move up to the desktop size. You can see that we have messed something up a little bit here. This whole new section that we added is visible on desktop, and we want to hide it on desktop.

[9:40] This div that holds all that stuff, I'm going to add SM hidden to make sure that that's set to display none on desktop. That's a little bit better. Now we have this problem where the account drop down is on its own line underneath the links, which we don't want.

[9:55] The reason for that is that the account dropdown used to be next to all these links in a flex container, but now the flex container is around the links. The easiest way to solve this is to move the account dropdown up.

[10:07] Things are getting pretty close here. There's one other bug that's easy to miss. That is, if we head back down to the bottom of this nav bar and we default the nav bar to be enclosed like it's supposed to, now you can see that, all of a sudden, all of the links on desktop have disappeared.

[10:24] That's because we have this nav element hidden whenever is_open is false. This is being hidden on all screen sizes.

[10:32] Before, this wasn't a problem, because we're resetting it to flex on small screens because these classes used to live up here. Also we can fix this by making sure we reset the display back to something other than hidden when we're on small screens and above.

[10:45] Originally, we had this as flex because we needed the items inside of it to be next to each other, but since we've moved all the flex behavior to this div, we only actually need this to be block to work.

[10:56] Let's do another quick double check here, heading over to mobile. If we open it up, things are looking pretty good, and we can head back desktop, and we can see, yep, everything looks the way it should. We can still open this dropdown and close it and everything works.

[11:09] There you go, we're able to take the content from this dropdown and adapt it to mobile in a bit more of a creative way I think. Instead of just trying to make the dropdown work on mobile, we rethought the design from first principles and tried to figure out, "OK, we have this content. What's the best way to display it on mobile?"

[11:26] In our case, we decided that it made the most sense to just duplicate the content so we could give it a completely bespoke treatment instead of trying to shoehorn all of our styles into the account dropdown component itself.