00:00:02 Let's get started with our menu section, where in the middle of the screen we'll have a drink that we show so that people get a visual representation of

00:00:11 what they want to order.

00:00:12 And also, let's be honest, these drinks are looking pretty cool, so once they see it, they're more likely to order it.

00:00:18 Then, we mention the title of this recipe, as well as some more info about it, and we have left and right arrows that allow us to animate this drink in place.

00:00:28 Let me show you what I mean.

00:00:29 On the finished website, you can now click to swap between these different drinks, see more information about them, and you can also use the right and

00:00:39 left arrows to move between different drinks.

00:00:42 And you can see how it nicely animates or slides in from left to right.

00:00:46 So back within the code, let's create a new component within the components folder.

00:00:52 And let's call it menu.jsx where you can run RAFCE to quickly spin it up.

00:01:00 Then as usual let's just import it within our app file where I'll simply say menu and make sure that it comes from components menu.

00:01:10 Then we can head over into the menu and we can turn it into a section with an ID of menu so we can scroll to it from the navbar.

00:01:20 I'll also add an area labeled by and set it to menu heading so that the users know that they can swap between different sections within this menu.

00:01:31 Once again, I'll display some leaves so I will have an image with a source of forward slash images, forward slash slider left leaf dot png,

00:01:42 with an alt tag of left leaf as well as an ID of M as in menu left leaf.

00:01:49 And I'll duplicate it below and change all the mentions of left to right.

00:01:54 So I'll say right leaf, right leaf right here, and finally M right leaf.

00:02:01 Perfect.

00:02:03 And below those two leaves images, I'll display an H2 that'll have an ID of menu heading with a class name of sr only.

00:02:14 What this will do is apply this class name where we are resetting the positioning of this heading so that we can play with the animations later on.

00:02:23 and I'll simply make it say cocktail menu.

00:02:27 Now if we head back over to localhost 5173 and scroll down below the art section you can see that we have the left and top right leaves and in the middle

00:02:38 we'll later on animate the title of the menu.

00:02:41 But for now we can focus on the menu itself.

00:02:43 So below the H2 let's create a new nav element that'll have a class name equal to cocktail-tabs with an area label of cocktail navigation.

00:02:57 And within it, we can map over the cocktails saved in the constants folder.

00:03:02 So if you head over into constants, index.js, and you search for cocktails, I believe it's these four, which we can call slider lists.

00:03:13 Or you can just rename it to something like all cocktails, whatever you decide to use.

00:03:19 Make sure to also change it right here at the bottom.

00:03:23 So whether it's slider lists or all cocktails, whatever it is, just make sure to import it right here at the top from constants and then map over them

00:03:32 by saying .map where we have each individual cocktail as well as the index of that cocktail.

00:03:39 And for each one, we can open up a new function block.

00:03:42 not an immediate return, because first I want to figure out which one is active.

00:03:48 So I'll say const is active, and it'll be active if the index corresponds to the current index of the cocktail that we're on.

00:03:57 But where are we going to get the current index?

00:04:00 Well, we can save it to the state.

00:04:03 So right at the top, I'll say use state snippet and I'll call it current index and set current index at the start set to zero because we're in the first cocktail.

00:04:13 We immediately have to turn this into a client rendered component.

00:04:17 So I'll apply a useClient directive at the top because we're using a useState hook, which is coming from React.

00:04:24 And then based off of this active class, we can show some different information.

00:04:29 So I will always return a button.

00:04:33 And this button will have a key equal to cocktail.id.

00:04:39 It looks like I misspelled the cocktail right here.

00:04:42 And it'll render the cocktail name.

00:04:44 So if we do this and scroll down, You can now see the names of four different cocktails that we're mapping over.

00:04:53 But let's title it a bit differently so that we know which one is currently active.

00:04:58 So I'll give this button a class name and I'll make it dynamic where we will check whether is active is currently true.

00:05:07 And if it is, I'll give it a text white.

00:05:10 and the border white and if it's not true I'll give it a text white over 50 and border white over 50 if you want to you can also put this into multiple

00:05:22 lines just so it's a bit easier to understand what's happening perfect and now you can see that the classic mojito is currently turned on whereas the other

00:05:30 ones are not actively selected Now, we also have to give this button an onClick element, which I'll do right here below the class name.

00:05:38 And within it, we'll create a callback function that'll call the goToSlide function, to which we have to pass the index of the slide we want to go to.

00:05:47 So we can also create this function right at the top, const goToSlide.

00:05:55 It'll accept the index.

00:05:57 and we can then figure out which index we're trying to go to.

00:06:01 So const newIndex is equal to, and now if we just let it to be index, well in that case, we would go from 0 to 1, to 2, to 3, and then we wouldn't have

00:06:14 any more cocktails because that's it, we have 4. And if the next time the user clicks 4, well then it's going to lead them to the 4th,

00:06:21 the 5th, 6th, and so on, but we don't have that many.

00:06:25 So in this case, I'll show you a neat little JavaScript trick of using a modular operator.

00:06:31 So we can check whether the index plus the total number of cocktails, and we have to get the access to the total number of cocktails.

00:06:40 by calling the allCocktails.length.

00:06:44 So if the index that we're currently on plus the total cocktails is equally divisible by total cocktails and it returns a number that is not zero,

00:06:54 well then we simply set it to the index.

00:06:56 Else we'll return it to zero.

00:06:58 So it'll restart once again once we reach the number that is greater than four.

00:07:03 If that explanation wasn't clear, we can refer to the MDN docs, checking the remainder operator, which returns the leftover when one operand is divided

00:07:11 by the second one.

00:07:12 So for example, if you try to evenly divide 13 by 5, you're gonna get 3, because we can only divide 13 by 5 two times evenly,

00:07:22 which is 10, and then 13 minus 10 is 3. So if we evenly divide by 4, like this, And then if our steps are zero, and then we go to the second slide,

00:07:35 which is one, two, three, and then once we reach four, it'll actually bring us back to zero.

00:07:45 And then we restart from scratch.

00:07:47 One, two, three, four.

00:07:50 Pretty cool, right?

00:07:51 So we have essentially created a slider that moves infinitely to the right, but resets at four.

00:07:56 And if you want to learn more about the reminder operator or any other operator within the JavaScript language, well, we cover it in much more depth within

00:08:05 the complete path to JavaScript Mastery course.

00:08:07 But for now, let's actually change the state so that it points to this new index.

00:08:12 So I'll say set current index to be equal to new index.

00:08:17 Perfect.

00:08:18 Now, if we test it out, you can see that you can choose a different cocktail with your mouse, but we don't yet have the arrows to switch between them.

00:08:26 So let's do that next.

00:08:28 Right below the nav element, I will create a new div and give it a class name equal to content.

00:08:36 Within which, I will then create a new div with a class name equal to arrows.

00:08:43 Then within it, I'll create a new button, and this button will have a class name of text-left, so we align it, and then onClick,

00:08:54 it'll call the callback function where it'll go to slide, that is current index minus one.

00:09:02 And within it, we can simply render the previous cocktail name.

00:09:06 So for now, I'll just say prev cocktail name.

00:09:10 Later on, we'll have to figure out what that cocktail name is.

00:09:13 And then, we can also render an image.

00:09:16 with a source of forward slash images forward slash right arrow dot png with an alt tag of right arrow and an area hidden of true great so now we have

00:09:34 this arrow right here and you can see that it actually swaps between all these different cocktails and it never stops That's because we used the module operator.

00:09:43 Now we can repeat the same thing by duplicating this button just below.

00:09:49 This one will render the next cocktail name.

00:09:53 So I'll say next cocktail name.

00:09:55 Go to slide, current slide plus one instead of minus one.

00:10:00 And I'll use the left arrow right here and call it left arrow.

00:10:05 So now we have those two different buttons that allow us to switch between the cocktails left and right.

00:10:12 Now let's go below this div that is containing these two buttons and let's render another div which will render the cocktail that we're trying to show.

00:10:20 It'll have a class name of cocktail and it'll render an image with a source of current cocktail that image with a class name equal to object-contain.

00:10:38 But hey, how do we know which cocktail is the current one and which ones are previous and next ones?

00:10:44 Well, let's figure that out.

00:10:47 Right here at the top of our component, I will say const get cocktail and then we have to get the index offset.

00:10:58 Is it going to be the first, the second, the third and so on?

00:11:02 And here we can automatically return all cocktails where we get into the current index plus the index offset plus the total cocktails and then we also

00:11:16 use a modular operator by the total cocktails.

00:11:20 So at any point, we know exactly which one is the current one, which one is the previous, and which one is the next.

00:11:27 With that in mind, we can extract those variables by saying const currentCocktail is equal to getCocktailAdd 0, so that's the current one.

00:11:37 Next, we can have the prev cocktail, which is going to be getCocktailAdd minus 1. And then we can have the next cocktail,

00:11:47 which is going to be getCocktailAdd 1. And now we can use this prev cocktail dot name to show which cocktail we're going to go if we click on the left arrow.

00:12:00 And here we can use the next cocktail dot name to know where we're going to go for the next one.

00:12:05 And here we can use the current cocktail dot image to show it.

00:12:09 So now if we scroll down, you'll be able to see that we have the curacao mojito and then we have the raspberry mojito if we go right.

00:12:18 And we can also see the image of the current one.

00:12:21 Now I want to show some more information about the cocktail that we're currently on.

00:12:25 So just below this div that has a class name of cocktail, I'll display another div that'll have a class name equal to recipe.

00:12:36 This one will have a div and it'll have a reference pointing to the content ref, because we want to animate this very soon.

00:12:45 So right at the top, I'll create a new reference that we can attach to that recipe part of the cocktail menu.

00:12:52 So I'll say use ref, import it, And then say const content ref is equal to use ref imported from react.

00:13:02 Perfect.

00:13:03 This div will also have a class name equal to info and within it, a p tag saying recipe for below it, another p tag with an ID of title.

00:13:16 And then below this div, we can render some more details.

00:13:22 So I'll render a div with a class name equal to details, where we will render the h2 that'll render the current cocktail.title.

00:13:30 And then we'll render the current cocktail.title.

00:13:35 and below it a p tag that'll render the current cocktail dot description.

00:13:40 So if we save this, you can see that now at the bottom we have this info that says that this is a recipe for a classic mojito with simple ingredients made

00:13:50 with tequila, lime juice, and orange liquor.

00:13:52 So this is looking so much better right away.

00:13:55 Let's also check it out on desktop to see it in its full glory.

00:13:59 Looks like the arrows are not positioned well.

00:14:02 So if you head back, looks like I called it arrow, but the class name needs to be arrows for it to get this flex item center and justify between styles.

00:14:12 So if you change it, you'll see that now it has a much nicer layout where we can actually click on these cocktails and immediately get new information,

00:14:21 or we can just click on the arrow or the name and immediately see the next one in line.

00:14:27 makes the choosing so simple.

00:14:28 I think I'd go with this one right here.

00:14:31 But now, when we switch between different cocktail slides, we want to show a beautiful transition of a cocktail sliding from the left side to the center,

00:14:40 and we also want to animate the text as it's sliding in.

00:14:44 And here's a little pro tip.

00:14:45 I told you before that every single animation has to make sense outside of just looking cool.

00:14:51 So in our case, the first one is to make them really interested into our bar, where they can see all of the different drinks that we offer.

00:14:59 Then we have this section right here, which brings them even closer to ordering a drink by getting the barman to come towards them and offer it to them.

00:15:09 And then finally, with the menu, the goal is to make them feel as the drink is already sliding across the table coming right toward them.

00:15:17 that's going to make them super likely to order it.

00:15:19 This is called emotion-driven design, and it's used in a lot of different websites nowadays.

00:15:24 And it is particularly useful when it comes to animations because you don't want to implement the animation just for the sake of adding it.

00:15:31 You want to add it to welcome the user to the jungle, for example, by moving these leaves up and down.

00:15:37 You want to use them to make the users feel something.

00:15:41 So let's add those animations.

00:15:43 First, we'll animate this title, then we will slide the drink across the table.

00:15:48 Right at the top of our component, I'll use a use gsub hook.

00:15:53 And I'll create a callback function as before, but this time I'll also provide something within the dependency array.

00:16:01 And that's going to be the current index.

00:16:04 Why and what does this do?

00:16:06 Well, when you provide something, a specific variable within the use gsubhug dependency array, it'll rerun all of the animations that are within it whenever

00:16:16 this variable changes.

00:16:18 So, whenever we change the slider from one cocktail to another, we want to rerun the animations for that other cocktail.

00:16:26 so let's start with animating the title by first importing gsap right at the top by saying import gsap from gsap and then we can say gsap.from2 we want

00:16:41 to animate the title from the opacity of zero to the opacity of one throughout the duration of one second.

00:16:52 So now if you click on one of these list items, you can see that the title slowly animates.

00:17:00 But of course, let's focus on the drink now.

00:17:02 That's the main star of the show.

00:17:04 So I'll say gsap.from2 .cocktail image.

00:17:11 We want to start from the opacity of 0 and most importantly the X percent from minus 100 so that it's outside of the screen.

00:17:21 And then we want to change the X percent to 0 to bring it back to the middle of the screen with the opacity of 1 throughout the duration of 1 second and

00:17:33 ease of power 1 in out.

00:17:36 So if you save this, you can see that now the cocktails nicely slide in.

00:17:42 And even though we cannot see the bottom of the text right here, at least not on mobile devices, it is all fully visible on desktop.

00:17:50 So let's animate it as well by saying gsap.from2.details.

00:17:57 h2 from y% 100 and opacity of 0. We want to bring it to y% of 0 and opacity of 100 with the ease of power 1 in out.

00:18:13 And we can do the same thing for the p tag.

00:18:15 So we'll duplicate this gsep.from2 and change it from details to P tag.

00:18:22 Perfect.

00:18:23 Now if you move over to the second cocktail, you can see that both the P tag and the H2 fly in from below to above.

00:18:30 Of course, we want to check out how that looks like on desktop.

00:18:33 So as I click it, you can see that it looks even better.

00:18:39 It is super quick and just works so well.

00:18:42 Oh, and if you want to, as an extra assignment for this section, you can also add a parallax effect to these leaves right here on bottom left and top right.

00:18:53 So they move slightly up and down, similarly to what we have done in the last two times.

00:18:58 And with that in mind, we're done with the menu section.

00:19:01 So in the next one, we can focus on the last section of this application, which is the footer section.

00:19:08 But it won't be a very simple, boring footer section.

00:19:11 We can actually make it as part of our contact page as well.

00:19:15 So we can see where our bar is located, some contact information, as well as the opening hours, and of course, our socials.

00:19:23 So let's do this next.