Responsive Side Navigation with Tailwind CSS and Alpine JS

hello and welcome to thyrus web development tips and tutorials in today's video i will show you how to create this side navigation with some links here and a top navigation bar in the desktop portion and when you go to the mobile version the side navigation is hidden and on click of this hamburger menu it neatly slides in and then goes back when you want to hide it let's see how to do this with tailwind css and alpine js let's open terminal and let me cd into desktop and i'll create a new folder for the project let me call it sidenav tailwind alpine let me cd into this and now let me open this in visual studio code with the shortcut code space dot okay here let me open terminal and let me initialize the project using npm init dash y with the default options we have our package.json file now using npm let's install tailwind css uh using the minus d option because we want to install it as a dev dependency so tailwind css also with auto prefix and post css cli because we will be installing tailwind css as a post css plugin here once the installation is complete you should see all three here within dev dependencies now let's create the tailwind css config file along with the css config file using npx tailwind css init and a dashb option that creates both the files needed this has the default options that we need in css as a plugin and within tailwind config js currently the jit just entire compiler is has to be enabled using an option mode here when you're watching this video this might be a version 3 when jit is already the default option but here since we have the uh sorry yeah since we have the 2.1.2 version we will have to manually enable this so modjit also within the purge we need to mention the path so now let's create a folder layouts within which we will have our index.html that's where we're going to create the side navigation also within the layouts folder let's have a styles.css and outside in the root let's create the source css file which is tailwind.css now in this tailwind dot css let's add the tailwind base utilities and components directives by using tailwind base tailwind utilities and then at tailwind components right and now within the layouts folder is our index.html let's create the skeleton let's call this sidenav using tailwind css and alpine.js and here we will be linking the stylesheet within the layouts folder this is what will be generated using taylor and css this is the file where we will be mentioning all the tailwind css utility classes in the tailwind.config.js this path the index.html path has to appear here within purge and all the other html files that we we might want to have within the layouts folder so the path here will be dot slash layouts slash star star slash star.html so as many folders you want you can add within this and html files can come within that so this is done great now in our package.json file let's do uh let's add a script let me refer the taylor and css documentation for this tailwindcss.com and then jit is what i would type enabling jit mode so again this might be different if television css v3 has already come and currently it's v2.1.0 and here let me copy this line here and we will add it within scripts so when we do npm run dev what it does is it uses post css which has tailwind css as a plugin and it converts the statement.css into and outputs it into the yeah this is what we need to change out we need to output it into layouts slash styles.css dash w makes sure that it watches the file continuously so whatever changes you make in the index.html it starts building it into styles.css currently empty so let me close this up and now let's start to check whether tailwind is successfully installed let's just try adding a h1 with maybe text blue 600 and say testing let me open this up in oh sorry we need to do nbn run dev first yeah so this is running let me open this up with live server so this isn't working for some reason let me just also add a font bold did i not save the package.json file let me stop this and do npm run there once again yeah now it's taking the right path i don't know why that went wrong anyway yeah so now taylor and css is working great let me remove this and let me open up the browser window side by side all right so now this is great so let's first add this top navigation bar of ours so which is header and let me give it class bg gray 700 within this let me add a span tag and say alpine gs with the text 3xl or text to excel and then after the sm breakpoint let me increase it to text 3xl all right and obviously text white and then let's add some padding p3 okay i also need to say block for the span back to make it display block we might also need a font bold let me make this b4 yeah this looks fine uh for this font to appear quite better there is this class that i usually add to body which is anti-aliased that makes the fonts look smoother i don't know if you could notice the difference anyway and now i would like to add a min height screen also to the body currently you won't notice any change because the body background color is anywhere white now let's uh create the side navigation bar on top of this and later we will add the behavior for that let's have this whole header within another div because that'll in the desktop version this whole thing will be to the right so something like this you will have the head you'll have this div on the right and then the sidebar on the left right that's why we're going to have this beneath this div and before this comes the sidebar so on mobile we need to absolutely position this because it comes on top of this div here for if i say absolute here then i need to add relative to the body wait that's not needed but anyway let it be and then let's say z or 10 because i want it on top of this but for that to work we need to have relative here and say zero and now let me have uh let me just start with with 48 or something let's just let's just see if this works pg indigo 900 that's the color i want for the side nav next white hatch screen not min head screen head screen okay so we have this appearing here this is quite narrow so let me change it to w64 yeah that looks quite good we might even want to make it w80 all right now within this nav let's have a div that has sidebar maybe within a span tag with class font bold text 3xl or again text to excel and after sm breakpoint let's make it text 3xl we need some padding of course for the whole number let's add a padding of p3 and then here let's have a v2 and on this side we want the icon to push back the cycle we want the icon button which is needed to push the sidebar back which is why we will have a flex box here so div class flex and then comes our icon which is a button so within the button we need that chevron icon or is it a carrot it's a chevron icon yeah for that let me go to hero icons and let me quickly copy the svg so hero icons i want to search for chevron chevron left copy svg copied let me add that here and minimize this so flex justify between is what i need right and let's have a class of padding 2 all over and then on focus let me say outline none because by default it adds an outline to the button and then focus bg indigo 800. also hover bg and they go 800 i also need some rounded corners here surrounded md yeah so this is what it looks like all right so now let's let's also minimize this div and let me add some links here say home so let me add some margin top so maybe margin drop of eight and then let's add an overall let's add a padding to the hr a a element itself so class bx4 and then by2 is that too much let's see when you hover i want a bg indigo 800 and then a rounded md and of course block display block so that yeah so this looks good enough let's copy this three more times and say home about products and pricing so yes now before we try to achieve the functionality let's see how to make the sidebar fit into the left in the desktop version for which let me make it full screen again all right so somewhere around this so somewhere around the lg screen size let's try and make the sidebar appear not on this div but next to the step so for that again let me collapse this great so here it's absolutely positioned but lg screen onwards we wanted to be relatively positioned and also we need to have a flex box here only for lg only for lg screen size and above flex and here this div above lg let's add a flex grow so what happens is it occupies all the space that is available after this navigation yeah now that's working let's see so this is the desktop and the large desktop and yeah right so this is what we wanted great now to begin with on the smaller screen size the side navigation is hidden now instead of hiding the navigation using a hidden or something let's translate it to minus 100 percent by using minus translate x full which is same as translate x minus 100 and for this to work we need to have the transform class all right so let's see if this works i think we also need an inset zero so that all the left right top and bottom are set to zero and why isn't this working oh sorry there's a typo yeah all right so now it's it's gone there for you to verify let's inspect element and see that yes it's translated so if you just change this to 50 so it's right there all right now we also need this hamburger menu right here uh for that let's come down here and just before the span let me add a button and of course this needs to have flex again and it anyway is justify start as the default now for this button let me use the same classes that just copy this of course you can extract this and use you can put it in the style sheet using the apply directive i'm not going to do all that right now and let me change this to gray 600 and then to raise 600 as well let's take the hamburger menu icon from here again hamburger yeah just one copy svg and put it here okay collapse this yeah we need to have a text white i think we can add the text white right here and then again right now it's i think items stretch so let me make it items center uh great i want to push it a little more to the right so what i do is probably px 3 right here okay that's good enough for now great so we have all the appearance ready now all we need to do is add the behavior for which we're going to be using alpine gs now why alpine js because a behavior like this to add in vanilla javascript includes a lot of lines of code and something like jquery is too heavy alpine js on the other hand is very light and also you don't have to use a whole framework like view or react for this so let's go to the documentation of alpine js which is right here within the github repository if you scroll down let's see how to add it in so let's you can of course uh install using npm but this is easier so let's take this from the cdn and include it here now we need some variables like you know to store whether the navigation is open or not and that can be done right here at the body because we have the navigation immediately as the child element we want it accessible throughout for that we need to do x data and within this add that variable and so let me say open or you can even say nav open something on that for now i'll just say open and currently it's false so the moment you load the page the sidebar is not visible on mobile right so we say open false and then on this button here when you click on this button you know not this button when we click on this button here we want the sidebar to open so for that we will use the at click equals open equals true so we're just changing the open faults to open true and on this button we do the opposite so at click open equals false because here we want the sidebar to collapse again now none of this will work yet because we're not doing anything we're not changing any classes here now this navbar class currently it has transform translate x full so what we need is we need to bind the class we need some classes that will apply when open is true and some classes that will apply when open is false so for the way you do that in alpine is plus and then within flow brackets let's add the class names that we need when open is true so when open is true that means the navigation side navigation is open so we need to change this to translate x 0. so this is the class 2 and when that's how that's where you add the colon when open equals true right and add a comma we need this translate x full let me remove it from here and add it here when open equals equals equals false okay so this should actually work now let's see if it does currently let me refresh once currently it's false because that's how it starts when you click on this great it opens when you click on this it closes fantastic now let's add a neat animation so that the side navigation slides in and then slides back out for that we'll use the tailwind utility classes duration uh maybe 200 and then let's add some easing so let's say eason or we can add ease in here when open is true or i think that's okay let's add that a little later once it's working so does this work yes great so let's add ease in here and then is out here sorry okay looks like that's working because the duration is too small we're not able to make out the difference you can either add it or leave it up and one other thing is i want to also change the opacity when it's hiding so that you see it literally disappearing so for that let me add opacity not there opacity 0 here and by default opacity is 100 but anyway let's add opacity 100 sure okay so you see it it faded from zero opacity to hundred and then now it fades back to zero okay this is great it works let's see what happens in the desktop uh-uh so in the desktop it seems to be hidden for some reason let's see how to fix that so for lg breakpoint let's set a transform none also we need an opacity hundred okay there it is but we don't need these two buttons for a desktop let's remove them by saying lg hidden same thing lg hidden all right there we go we have this here in the desktop and then on the mobile version hidden slides in slides out great so i hope you really understood something in this tutorial a very very very minimal usage of alpine js and you see how simple it was just a very few lines of code uh adding a class conditional class here x data and then add click in two places that's how minimal this framework is so look forward to the crash course on alpha ngs coming very soon thank you for watching hit a like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from thyris

Channel: Thirus

Views: 5,696

Rating: 5 out of 5

Keywords: responsive sidenav, responsive side navigation, sidenav with tailwindcss, sidenav with tailwind css and alpine js, sidenav with alpine js, alpine js tutorial, tailwind css examples, alpine js example, tailwind css and alpine js

Id: bi2ENlSlFsM

Length: 25min 38sec (1538 seconds)

Published: Sat May 01 2021