 Welcome to this supercharged TLDW. I'm Paul. If you didn't catch the livestream with me and Serma last week, well, basically we built a side nav. Let me show you what we built. So you've got your standard app bar here and click on this side bar and you click on the background or you can dismiss it with a sort of drag gesture like that. Awesome stuff. So let me show you how we built it. But before we do that, as usual, we're going to head over to, yep, you guessed it, Theory Corner. Join me. Hello. Welcome back to Theory Corner. So this is what we've got. We've got our page and we've got a container element. The container element is going to be the home for the side nav and the background. What we're going to do, first of all, is we're going to put overflow hidden on this. We're going to make it take up 100% width and height. So it's got overflow hidden because this is going to transform out to the side and we don't want any scroll bars. So we put that in place. The background, we're just going to transition its opacity from 0 up to 1 and we'll set it to have a transparent black color or semi-transparent black color in the background. The other thing is this side nav. We want this to slide in from the side so we need to have wheel change transform on it so that it gets its own layer, very much like we did with the swathable cards and then we can transform it in and out. We're also going to need some buttons for bringing it in and out. We're going to have to have some touch events so that we can do the dragging stuff. All cool? Let's go back to reality. Welcome back to reality. Oh, yes. Yes. Reality. That's where you'll find us today. Pragmatic to the end. Code. Okay. So the markup and the CSS is pretty much what we discussed in Theory Corner. We've gotten aside. We've got a few JS classes here so that we can pick it up in the JavaScript. But mostly it's pretty much what you'd expect. There's a button for closing. There's a button for opening. We've got the title here for the side nav and then we've got the list of the side nav content. In terms of the CSS, here's what we've got for the background. You can see it's actually done with a before pseudo element and you can see that it's got a background of black with an opacity of 0.4. We switched on wheel change opacity because we know we're going to be changing the opacity so we're going to say wheel change opacity. Didn't say wheel change pasty. That would be a different thing entirely. We'll change opacity and then we can set a transition of opacity with that curve. That looks quite nice. 0.3 seconds. Nice and quick. Then the other thing is when we set the side nav to visible which we're going to do with some JavaScript and we can say to that before that we want you to fade up from an opacity of 0 to an opacity of 1. The same is pretty much true of the side nav itself. Here it is and you see it's got a box of shadows. We have a nice little bit of shadow on the side. The interesting thing is we have to transform it by, in my case, 102% which sounds really odd but the reason is there's that shadow and if you just transform it 100% to the left you still see a little bit of shadow on the left hand side so we just take it a little bit further, solves that problem. The interesting thing about the side nav itself, the one that comes in from the side, is that it has a separate animatable class. The reason is I want to switch that off when they're doing the drag motion and have it on when they're doing the automated transition from the side in and out. So we use this class to basically say this is kind of, it's doing the automatic transition or when it's off it's going to be used for the dragging. Cool. The JavaScript is over here and it's the same trick as last time. A bunch of event handlers that we bind on with this. If you haven't seen why I do that go back and watch the swipeable cars TLW explain pretty much why I do this approach to my event handlers. You don't have to take this approach but it works pretty well for what I'm doing. So we bind all those on and you can see here we've got the show and the hide. Now here's an interesting one. I actually say that if you click on the side nav, the containing element, the container from theory corner, I want you to hide the side nav. Well that will work kind of but then if you click on something inside the side nav, well that's kind of weird because you clicked on something in the side nav and it's going to dismiss. The way we get around that is we basically say the side nav itself that's going to hide it but any clicks inside we're going to call this block clicks function which you can find down here and block clicks all that does is stops the propagation. So it's almost like canceling the event. Now you don't want to do this all the time you only want to do it when it makes sense for your app and it makes sense in my case I think. So that's all good. So I think all that's really left is to just have a quick look at that drag motion. Now if you remember the drag motion looks like this we can click and we can drag and if we just come away from the side a little bit and let go it dismisses the side nav. So let's see how we code that in. Well we have our on touch start here and basically because this is bound to the document I basically say if the side nav isn't open, bail. Don't hang around. So we're going to call this any time somebody hits touch start but we only want to deal with this if the side nav happens to be open and what we do very much the same kind of deal as the swipeable cards we capture the start position and we copy that across to a current position and then in the touch move we basically figure out how far we moved and then we can apply a transform in a kind of game loop and update function which you can see here. There's the translate current mind to start and then we apply it as a transform. If you've seen swipeable cards this is all sounding very familiar I'm sure but it works and it works really well. The last thing is on touch end we basically say if you've translated just a little bit to the left hide the side nav that works out really well for us. One other little thing to note is this. In terms of the on touch move by default you'll get that throttled back in Chrome so you won't get them every frame unless the very first touch move event has an event.prevent default on it. So what we do is we calculate the translate and we say if it's less than zero as in you've started to move it we prevent the default and that means it will get all the updates from then on. So there you have it that's the side nav pretty straightforward in terms of these things but this works really well it works at 60 frames a second even on a mobile device. If you haven't caught the live stream against about an hour long it's in the description below so have a look through there and have a watch of that if you've got a spare out again it's usual kind of stuff you see all the bugs you see all the chat you see all the discoveries in the kind of discussion that Serma and I had. Don't forget to subscribe. Done. And I'll catch you next time. If you like me like clicking on things you can click okay hit the subscribe and there's the live stream.