Animated sidebar with Tailwind and AlpineJS

hey friends I'm sakay and today we're going to continue on our mission to build the Animal Crossing New Horizons database using telen CSS and alpine.js and of course the Animal Crossing API so in the last video we created this list of villagers that pulls in the data from the API it pulls in their images their name the colors and whatnot but it was pretty static we couldn't do anything we couldn't click on them and learn more about them and so in today's video we're actually going to make these interactive and if we click on these we'll actually be able to open the sidebar here it'll have a nice move-in animation and it'll dynamically pull in the data of whichever villager we click on here we're not creating a sidebar for each individual villager we're just populating it with the data dynamically so without further Ado let's get into it [Music] all right so let's think a little bit about what we actually need to do here so there are a couple things that need to happen so when I click on a card we need to open a sidebar and this sidebar needs to be populated with all of the data from the Villager that I just clicked on then when I hit close here or click outside of this card we want all of this to disappear so as I mentioned I already have this built out so if we head back to our code here you can see that our sidebar is built here using Tailwind it's fixed to the right of the screen it takes up about half of the screen and below that we have an overlay this is just this like dark brown thing in the background that lets users know that this is open and they should focus their attention on the sidebar and typically users expect that if they click on this the sidebar will close so obviously we'll make that happen so as I mentioned we need to keep track of a couple of things first we need to know if the sidebar is open and next we need to know who the current villager is who is the Villager that I just clicked on so you'll remember this from the last video in our data object we are now going to add a new property called is open this is going to be a Boolean and by default it's going to be false then we're going to add another key here called current villager and this is going to hold the Villager that I've just clicked on which by default is just going to be an empty object I haven't selected any villager off the bat so now we need some way to actually update this right if we go back into our index.html well just like last time we are using this data.js script and in this data.jscript we have access to villagers which get populated here and then these two properties so now we need a function to actually update that when we click on something but before we do that just to make sure everything is working we're going to go down and we're going to hide our sidebar so using that X show directive that we learned about in the last video we're going to do X show only one is open [Music] equals false sorry when is open equals true which as a shorthand we can just write X show when is open now we can see that the sidebar is gone and we'll just do the same for our overlay here so X show equals false now we're just going to do the same thing for the overlay in the background so we'll go down here and just like get that X show when is open now we can see that our overlay is gone again and now if we go into our data and Change is open to True okay this isn't opened which makes me think yeah I think this needs to be data dot is open perfect changes to data dot is open and now we see the sidebar is open and if we go back into Data and change this to false perfect it's not open anymore now that we have this we need a function that's actually going to change this from false to true so in a new file here I'm going to say sidebar.js insidebar.js will create a new function called handle click [Music] uh Arrow function and the first thing we want to do is give it a couple of arguments so it's going to take a data and a villager data is always going to be the data that we pass in and villager is going to be the current villager so first we want to take this data and set the data dot is open to true so data dot is open is going to become true every time we click on a card then we want to set data Dot current villager to be the Villager that we pass in here so now that we have this pretty basic function we're going to actually pull it into our HTML file here so we'll do a new script or the source is our sidebar.js which now gives us access to that function what we're going to do is within each of our cards which is this div right here we're going to create a new on click Handler and the way we do that with alpine is we can just use the at shorthand and right click and then we'll say that on click we should use the handle click function where data is data and villager is villager so data is going to be just the data object from here and then villager is going to be the current villager that we're iterating over so let's go ahead and test that out see that if I click on this we get the sidebar opening as we would expect but of course nothing is happening and it doesn't matter what village I click on none of the data is actually the correct data so the first thing we'll do is to make this close so if I go ahead and find the close button here so our close button will add a new on click Handler and when we click it we just want to set data dot is open to be false let's try that out awesome so if I hit close it's setting that property to false which means that these sidebar is closing but you'll notice that if I click away if I click outside of the sidebar right as we as we mentioned we expect that when we click on anywhere outside of it we want it to close so an easy way to do that is in the sidebar we have access to a cool modifier thanks to alpine.js so we can say that when we click outside so when we click on the screen outside of this element do something which in this case is of course setting data is open to be false so let's give that a shot open this and if I click outside we're setting that variable to false thus closing the sidebar and just for good measure and for safety we can make sure that when we click this overlay we are also setting data dot is open to false you don't have to do this I might actually slow the app down but it's so minimal that I don't think it really matters and this is obviously just another approach so you could go with either this or the click outside either of those work it doesn't really matter and now we'll go back just check that everything is working perfect now if I click on this this doesn't look great right it's just kind of appearing out of nowhere it's not how we would expect this to behave really so we want to make this animate and slide in from the right and also make this overlay in the background fade in and to do that we're going to use Alpine's X transition directive so all we need to do is in our sidebar we need to write X transition and then we'll start to set some properties so let's go in here and quickly take a look at their transition directive you can see that transition has a bunch of properties we have enter start enter end and then we have leave leave start and leave end you can learn all about what those mean down here in the descriptions I will just tell you kind of how I've done it and you can read more about it here for now I'll just paste in some of the stuff that I've written before so we have X transition enter which is kind of like the initial state of this animation so we're saying that we want to animate the transition and we want ease gentle which we'll talk about in a second and a duration of 300 then we have our start so at the very beginning we're going to translate on the x-axis full so 100 so it's completely off the screen and then at the end of this we want it to be at an X translation of zero so exactly where we started and then we do the same in Reverse so the transition leave we are also animating transition we're also using the ease gentle and we're also using a duration of 300. at the start we're going to translate by zero so it's where we left it and at the end we want the translation to be full so 100 fully off screen I'm going to hit save and go ahead and test this out and we see pretty nicely it moves in obviously the background is happening instantly so we want to change that so let's go down here and add X transition directives for the background as well I'm just going to paste in transitions that I've already set out these are very similar you just see that we're doing basically the same thing but we're starting at an opacity of zero and ending at an opacity of 75 and vice versa here on the way out and now if I hit this our overlay in the background fades in nicely there is one thing though this is gentle is actually something that doesn't exist in here by default it's the custom animation that we've set up here this is a custom bezier curve that we've set out here in figma so we can take this custom bezier copy the value and add it to our Tailwind config so all we need to do to add this is to add a new property here in our extend object it's going to be transition timing function this is how you add more eases to Tailwind and of course we are calling it gentle and we just need to add in our cubic bezier here that we copied from figma and now we have access to this ease gentle easing curve in our file and you'll notice here that it's easing in nicely just as it does in our figma designs perfect so the last thing we need to do is actually fill this in with the correct information so remember that our handle click function is not only setting our data to be true but it's also setting our current villager to be this villager here and so all we need to do is go into the sidebar which is down here and using some of the stuff that we learned in the last video we're just going to replace all of that data with instead of villager the current villager so you remember we were using X text to pull in properties from each villager last video so villager.species villager.personality and essentially we're going to do the same but just replace it with current villager instead of villager so if we go to the sidebar again let's find one of our first items as an example our source here so rather than Source we're going to add a colon here and instead of the static link we're going to make it data dot current villager [Music] Dot image URI let's give that a shot we go in here and open Antonio we see Antonio's image we open snooty we see her image Kurt you see his image and so on so again I'm not going to show you this because ideally you've watched the last two videos and you understand how to pull in data from an API using Alpine so I'm just going to paste in what I've already written and you can see that for species I'm using X text and that same pattern so data.current villager dot species for the personality we have data current villager personality and down at the bottom here we have data current villager and their Japanese name to add that little flare at the bottom so if I hit save and head back here we can now see that every time I click a villager it's setting the variable to true so the sidebar opens and it's also setting the current villager to Serrano or whatever villager I'm clicking on and populating all of that data as we just saw in here we have Serrano we have his catchphrase or his saying uh birthday gender Hobby and His Japanese name all of this is updating dynamically try with snooty different birthday different gender hobby personality and so on I can scroll all the way down find some other cute villagers very cute very cute and it's all working oh I like this one so shiny very pretty and that's all we now have a fully functioning so to speak app that pulls in all this data from the API it loads a bunch of villagers it allows us to click into them and learn more information that we're also pulling in from this API of course you could take this much further we could add a search bar on top we could add some filtering we could add pagination as I mentioned but I think for now and the purposes of this larger multi-part tutorial this is great it's exactly what we set out to do and it matches our designs in figma as we'd expect so that's all for now I hope you enjoyed this series I hope you learned something and we're able to follow along as always you can get all of the files all of the code and all of my working files in General on my patreon if you did enjoy this please leave a like on the video and consider subscribing so that you can get some updates when I put more videos up and with that said really hope you enjoy this hope to see you in the next one and until then Happy designing [Music] foreign [Music]

Channel: Sekei Design

Views: 3,103

Keywords: figma, design, product design, ux/ui, ux design, figma tutorial, interactive components, css, tailwind, tailwindcss, animal crossing, development, web development, alpinejs, javascript, api, animation

Id: gwYB6TNNz84

Length: 14min 26sec (866 seconds)

Published: Fri Nov 25 2022