Build an Animated Sidebar with React and Tailwind CSS

let's take a look at building an animated sidebar with some of my favorite technologies react and tailwind css what's up everyone if you're new to the channel my name is james quick and i do weekly videos on web development related topics i do a lot of javascript and vs code and i do a lot of react and in this video we're going to combine rat react not racked and tailwind css to build a pretty basic animated uh sidebar for your application now this is uh basically a video version of an article that came from avnish who uh has a blog uh at uh i'll include the link below so you can check it out so i'm basically just gonna kind of walk through this this is collaboration with him so make sure to check out his content he does like daily i feel like blogs that are really really awesome so go and check them out and in the meantime we will go ahead and get started so the first thing we'll need um inside of vs code here is to actually create a new react app notice i have fig that's giving me some intellisense in here which is really cool so i want to do mpx create react app i don't know why i didn't actually pick up create react that's interesting and we'll call this animated side bar and after that finishes uh we will go yeah you can go ahead and install that uh we'll go and actually open this and then we'll set up tail one css inside of it as well so i'll give this a second we'll come back and we'll work on it all right that is finished although i feel like it took longer than it should if you'd like to know how to set this up with vt which would be much faster let me know in the comments below and i'll do a video on that so let's go ahead and open uh this inside of vs code so i'm going to use this code dash r and then the folder what the r will do is go ahead and reuse the window that i'm currently in so it'll just open it right here and then we're going to need to install several packages for tailwind to work so these are going to be dev dependencies so we can do npm install dash g and we'll need tailwind css we'll need post css and then we'll need auto pre fixer this is a fairly standard setup for using tail 1css but we'll need those three packages and then uh once we have uh once we have those set up now we can run uh tailwind css init dash p and what this will do is it will go ahead and create this tailwind config file and our post css config file as well so inside of our tailwind config we can say we want to pay attention to these type of files so anything that's in the source directory i just pasted this in anything that's in the source directory and then has a suffix or a file extension of js jsx ts or tsx depending on how you configure your react applications and then inside of our index css i'm going to get rid of all the default styling here and we'll add in our kind of base tailwind component so it's tailwind base and then it is tailwind components and then lastly it is utilities all right hopefully all of those are spelled right and what we should see is inside of our index.js it pulls in this index.css which should then have a setup for tailwind so to test this out let's go ahead and do an npm run start this will hopefully interesting will provide access to documents interesting i guess so yeah but this should pull this open and actually pull it open on the wrong tab so let me open it up inside of here so here's our basic react app and we're going to need to kind of strip out the stuff that is here so in this index we'll leave the index alone but we'll go to the app.js file and let's minimize this a bit and we'll just kind of get rid of everything in here for now actually i guess we don't technically have to we could just leave this and have our sidebar be on top of that so we can do that and then let's go into our source and let's add a new directory for components and we're going to create a sidebar sidebar js component i've got snippets in here for stubbing out a react functional component so rfc there now creates this functional component for us with just blank div in between so we want to now use our tailwind classes to style this thing so let's create an h2 in here and let's just say this is the sidebar now obviously you can add as much or as little content in there as you want and then we'll start to stub out these classes make sure you do class name instead of class and let's see that so actually the first thing we should do is make sure that tailwind is actually being uh loaded in here correctly and one of the things that we can do to help with that is get rid of all of the styles inside of app.css so let's just make sure that stuff is gone this looks pretty boring as is and maybe that's a reason for us to come into our app.js and go ahead and remove all of the stuff that's here so let's remove all that stuff and then we'll have an h1 that says uh main content or something like that it doesn't really matter so there's our main content it's up there it's really small um so if we wanted to make this a little bit bigger we could have class name and then we start to use our tail1 classes of text for excel and text center i believe we'll go ahead and center that text and then for our app we can add some class names up here as well so we can have uh mx auto to center everything if we wanted to we could have uh margin top of eight to give ourselves some margin up there and uh okay this is pretty basic but that's going to be our main content and we can tell that tailwind is working tell that tailwind is working cool so let's go back to our sidebar and actually let's go ahead and render this sidebar inside of our app so let's go ahead and get a reference to this should get auto imports in here and we can just uh stub out that uh using that sidebar and it should just say this is the sidebar and then there's our main content so that's what we want to go and work on all right so let's go back into our side bar and we want this to be absolutely positioned so to do that we can do that with top dash 0 and then right 0 and this should go ahead and make this thing be absolutely positioned actually not quite we want this to be fixed position so we need to add a class of fixed as well so this will make sure that this is going to be in the top right corner so if you're going to look at this see that it's moved over here and then if we added some background of bg blue uh 400 let's say 500 i accidentally typed in there's our actual sidebar so a couple of things we need to fix we need to have a width of something and we can what's the biggest width we can get in here biggest width is 20 24 so let's see what that looks like uh that's not very big can we get much bigger than that see is there a hundred for width i have no idea i'm just kind of trying out stuff doesn't look like there is uh one of the things we can do though is we can interpolate inside of here with newer versions of tailwind is we can interpret interpolate values inside of inside of these brackets so this w now and then 35 view width allows us to use those viewport elements which should make this thing a lot bigger which is what we want we also want our height to be full so we'll do h full to make this thing go the full height and now we're starting to get much closer to what we what we're looking for we can also add padding of 10 in here just to space that stuff out and that's actually looking pretty good and then the content that's inside of it we can add for the h2 we can add a text of two xl and we can add a text white and that's like we could do a bunch of different things that's probably about all we want so now we actually want to start to enable the toggling of this so we're going to use a use state in here and i've got a little bit of auto import there and then a little function i think this would give me a little snippet it's not working this one there we go all right so when we keep track of the uh show and hide of the sidebar so um i can say i'm going to call this like is is open i like doing the is i will set this to false initially so we've got our piece of state for is open and then we're going to need some way to actually toggle this thing and actually show that we want to either show or hide it so what we'll do we'll wrap this thing in empty div tags or empty tags here and then we'll go to conditionally render this thing so we will say if there if not show sidebar but is open and we'll start with the not version of this if it is not open then i don't need to react uh we'll do a ternary here so if it's not open we will just for now we can have a p tag that says not open and then um if and we'll put these inside of parentheses like that and then the opposite of that is with after that colon i'll come back and kind of rephrase this all in a second so let's make sure that this is rendering appropriately i think this goes down here and this goes after it hopefully that's right so let's take a look at this now that we've actually got it in here and get rid of this extra line and maybe tab this in one more time so if this is not open we'll just show this text we'll show a hamburger button in a second and then the opposite of that if it is open we'll go ahead and actually show the sidebar so if we run this now we should see it says not open and it's on the left because it doesn't have all that styling and then if we were to change this now to true this should be our full sidebar on the right so we're starting to get the right thing so what we actually want instead of this p tag is a button and we'll end up copying in a little bit of svgs for this but we'll have this button and and inside of that button if it's not open i'm going to copy in this svg here that avnish has provided if you want to copy that source code it's inside of the in the article that he published so let's tab this over a lot and [Music] format this a bit i guess we'll actually need to take everything in one more and then we'll want to call not set show bar but set is open so the opposite of is open all right so uh let's get a little more room on the page here so if it's open or if excuse me if it's not open we want to show this button that uses some svgs for those hamburger lines uh and if you click on let's say not the svg directly but the button directly if you click on it we're going to toggle that is open so let's start with false up here so it won't be open we will now click on this button and it should show the sidebar but now we don't have a button to actually close the sidebar so now in addition to this content up here we'll want to add this x that we can do the opposite of this so inside of here we'll have another button and this one we'll just say this will just have an x on here and then we'll add some classes to this one so we can say uh the text is going to be i don't know xl or something text will be white and let's just see what that looks like to start i think that will put this over here on the right so we actually want this thing to be potentially absolutely positioned as well so we can add fixed and then instead of uh top top zero and right zero we can do like top four and right four this should put this that thing right at the top uh top right up here it doesn't look super good but it'll actually do exactly what we need it to and uh with that now we'll add our on click and we'll do this the same way we just did a second ago where we will call the let's see we'll call set is open with the opposite of is open so this will allow us to toggle this thing once we add this in there so now let's see we have our x here we can close that we have our hamburger and now it's opening and closing and the only thing we're missing is the actual animated version of that so let's go ahead and add that now so to do that we want to conditionally add some classes inside of our javascript to the uh to this thing over here so let's uh let's take a look where basically what we want to do is we want to translate this thing on the x value all the way off the screen that way we can translate it back to uh where it should be and then run animations on that and translations are optimized for animations so we can say now we're gonna change change this to um javascript and we'll change this to es6 template literal string like so and now inside of here we want to conditionally add some classes so inside of our dollar sign curly brackets now we can check if it is open so if is open what class do we want to add well we want to add the translate x of zero if it's not open we want to add something else we want to add the translate dash x full so what this is saying is we're going to conditionally add one of these classes if it should be open we want to set translate x to 0 which will put it where it naturally should be otherwise we will translate it off basically off the screen so now let's see if we're able we probably won't actually see a difference here because we now need to add the animation so now let's go ahead and actually add those the animation here on this element so these classes are going to be uh ease in out for the ease type of the animation and then we'll say duration is 300 all right now let's actually see what this looks like so uh this i thought would slide in but it is not let's go and check on that uh well we've got our duration is misspelled so that's definitely part of it and now if we run it still nothing and i think we're having an issue because right now we're conditionally rendering this this thing over here we actually want that thing to stay so the thing we want to conditionally render is uh the different the button and the other button so let's move let's move all of this outside of the condition so let's move it down here so this thing will always be there except you won't see it because by default it will have that class of the transition that didn't work the way i wanted it to i'll leave the formatting as it is but because it has this translate x full it'll be off the screen and we won't see it so now let's move our button up here all right so move that button up there and then i will just show the nav bar or the sidebar at all times but because of the translate x full and zero it should now animate on and off so you see this thing comes on and now the problem is that our button maybe isn't visible up here with the x so i think we probably have a z index on here z index of five so if we set a z index to get that on top i think we'll have that uh ready to go so let's look at our z i don't even know what z10 that'll work uh so this should be on we can open and close this thing which is nice now the only other thing you're seeing is that we have this jump in content over here and i probably don't want that so we probably want this nav bar just to kind of come right in and i think that's coming from adding in our button there so let's go take a look and see if we can prevent that jumping as we animate the sidebar in all right so looking at our code again i think what we need to do is apply these classes to our button parent of the svg so let's add these to our button and get rid of it from the svg that way this thing is actually fixed up here and it's not an svg that's fixed to the button itself so now the sidebar should come in and out pretty easily and the the animation of this is really nice so tailwind gives you all these tools which is really just beautiful to be able to set this stuff up without a whole lot of work so hope you enjoyed the video make sure to go and check out the article from avnish and all the other articles that he has i like doing video versions of his stuff because he does such a good job makes it easier for me to create content and i get to help share the cool stuff that he does so if you'd like to see any other um you know basic how do you build certain components with tailwind css and react or in svelt or something else let me know what kind of stuff you'd like to see with a comment below thanks as always for checking out the video and i'll catch you next time

Channel: James Q Quick

Views: 42,497

Keywords: react animated sidebar, tailwind css animated sidebar, tailwind css tutorial, react tutorial, react tailwind setup, javascript tutorial, web development, build a sidebar, react sidebar navigation, tailwind css, how to use tailwind, tailwind css tutorial react

Id: Pe1Vo2N3Z2c

Length: 17min 42sec (1062 seconds)

Published: Tue Dec 28 2021