 Welcome to GUI Challenges, where I create interfaces my way, and then I challenge you to do it your way, because with our creative minds combined, we will find multiple ways to solve these interfaces and expand the diversity of our skills. Today's GUI challenge is a responsive side nav. We're talking a full mobile desktop layout with keyboard accessibility and just a little dollop of JavaScript. Let's see what I have. Join me in my debugging corner. This is where I spend a lot of time, because I can sort of set up multiple different environments. So what I have here is Chromium, Android, iOS, Safari, Mac OS, Safari, Firefox, and Opera. And Opera over here has a emulation of a color preference set to light and an prefers reduced preference set. So this is why we see the light layout and we're going to see the, well, let's just see it. Our side nav does not have motion over here, right? But if we're over here on Android, we do see motion and iOS, we do see motion. So that's really nice. We can also see that focus is being set to the open and close buttons. So when something is opened up, focus is set to the close button. And if we look closely as well, when we hover, we can see that there's a title that's on this close button. If we're really a student looking, we can see that the URL bar is changing while we click these as well. And that's because these aren't actually buttons, they are links. So this space here is being covered by a link. It's a backdrop link to sort of eat your click and send it as a close event. We also can close this with escape. So the escape key also sends the event to close it for keyboard listeners. And on top of that, we can use the keyboard to open and close. If we had enter, we'll close. We hit enter again. We'll open and we are explicitly setting the focus to the open and close buttons after the event and the transition has happened. So that way someone can be have this nice UX where they conveniently opening and closing the menu. I thought that was really nice. Also, notice our desktop layouts do not have the sidebar exposed. They also don't have a close menu over, you know, there's no like link drop that I can click that sort of closes it and there's no hamburger menu. And we're doing all of this with CSS and just a little bit of JavaScript. Let's review what we got. So if we're talking about the responsive aspects of this layout, we're mostly going to be focused on our media queries here. So we did a media query of you'll see max width 540. And the reason that we chose max width is we're kind of putting all of the logic for a slide out concept in the different states that it has to a viewport that's really small. So if I drag this one out, we'll see that it's gone. And now that the state and the URL bar won't change the layout at all. And so we're just sort of like containing everything into that little concept of space. So we're watching to see what position or what size the viewport is. And then we're changing the layout from a two column layout and grid to a one column layout. And that's done right over here display grid. We're creating a new grid with some shorthand that's one row named stack and two columns. The first column is called min content has no name. The second column is called stack and it's taking up the rest of the space. So this first column is our side nav, and it's essentially self sized. And our main column is its own size and it will do. Well, it's the rest of the space. It will fill just like water. And when we're at a max width of 540, we're going to go find those two columns. So we're going to set them to the same column. We're going to set them to the same row, to the same column, and that will make them stack. And once they're stacked, we can look to see again, if our max width is 540, we're going to start setting the position of our items on here so that they can be like a scrollable side nav. We get a position of sticky where at the top, we're going to be the height of the viewport. We want to overflow and like scroll inside of our own space. And we're going to position you off the page. We're going to prepare the browser for a transformation. And we're going to say that we want to transition this element as its transform is changing. We're going to do that over, you know, this default duration amount of time, which is point six seconds, unless someone says they want to like have less motion, then we just set the duration to one millisecond. And now this whole entire animation can work with someone's preference and not even know what's happening. So let's get to the pseudo class part of this. So we were using links to open and close. When we click a link, we're setting the URL. If we look at these, we can see the URL is changing to hashtag side nav open, hashtag side nav open. And even on the page where we don't see a side nav open, we see the URL changing and I can close it and that's just how it is. That's because these are all syncing across. But anyway, when that hashtag is matching side nav open, so that it looks like an ID in CSS, right? It should. And if we use that exact name for our element of our side nav and we set that in the URL bar at the same time, we match this target. So this target says, Hey, does this element have the same ID as the URL hash does? If it does, it's selected. And now you can do stuff with that state. So we are storing state in the URL bar, leveraging it right here through a CSS ID and a selector. And then we can set this thing to visible when it is the target. We'll translate it back into the viewport. So we'll set it to zero, which is essentially some initial resting place. And we'll make sure that we transition out of this as well. So super cool stuff right there to be able to use that in new state with just links in the URL bar and a CSS selector. People have done crazy. Yeah, I've seen people build games with this. So you can build games with that logic. I decided to just make it open and close the menu. So that is the majority of the workload here. We used a two column grid to go to a one column stack. We did that with a little bit of CSS. And then we're using transforms to move our sign up off the screen only when we're in a mobile sized viewport, all which is a little bit of CSS. So let's talk about some of the final touches that we do with JavaScript. And in the JavaScript, we are watching for the escape key because we want someone to be able to close the menu in maybe a frantic way or a way that they expect. And the escape key is a great way to close something that you've opened. So we listen to the escape key. We also watch for the animation end event to happen on our side nav. So when it opens up and the animation is completed, an event gets fired to JavaScript and JavaScript says, hey, we've opened up. I'm going to set the close button to be on focus. And then when the transition has closed in the side nav is completely exited the viewport, we say, let's set focus to that open button. And that creates that cyclical UX experience for keyboard users and just the visual for yourself as you open and close that where the highlighted areas are for you to be drawing to next to manage that piece of element that you're looking at. And that's it. We do go into the HTML and sprinkle in some aria roles and some other accessibility items here. I'll even quickly show you how some of that stuff works. So if I'm here on Chrome and I command at five, I'll pull open the screen reader. So here we are inside a side nav. Go to challenges, link, open menu, we have a link that can open a menu. This link will close menu to the complimentary element. So we have a side nav that's complimentary to a main and the screen reader is telling this user that this button here will activate a complimentary item or will close a complimentary item. Visited link, open menu, main, open menu, main, it's associated with main link, close menu, complimentary. Right. So what we've done is made sure that if someone is focusing on these and they can't see that they're getting audible clues that help them know what this is going to do and these little touches will help someone drastically as they're navigating your site and trying to figure out how to get to the thing that they came here to get. And that concludes this GUI challenge. And of course, like always, the code is open source. You can grab it. You can change it. You can completely delete it. I don't know. Do whatever you want with it. This is really fun. And I want you to feel inspired to go build a side nav of your own. Whether or not that uses, you know, pseudo classes and CSS grid, it doesn't matter. There's ways to make mine better. And there's ways that yours can solve your problems even better. And I hope this was inspiring in some way.