Building a Responsive Navbar with TailwindCSS & Alpine.js [TUTORIAL]

hey welcome back to another video this video is going to be on me building the navigation bar here you see in what's going to be the next version of my personal blog this is done with tailwind and it's actually using something called meraki ui i probably butchered that name but this is really interesting it's basically a set of pre-built components with tailwind that make getting started really really easy and i've just taken a navigation bar from here and tweaked it to what i need so i'll show you how i build stuff with this and it's really really easy the next videos are actually going to be about me building this and then the post section and then the footer which again are taken from this set of ui components so this the starting point nothing there the file is completely empty apart from a tailwind import an alpine import and just a font from google called carla which we're applying to everything within the body and before i get started i just want to mention if you find this information useful if you're learning stuff please do consider subscribing it really helps out i've also left a link in the description to cloudways.com it's where i host all my laravel projects and actually certain wordpress websites they're fast secure very easy to deploy and if you're new or if you're not looking forward to spending a lot of time getting stuff deployed to these more complex systems cloudways is great anyways to start basically we have a body setup and that's pretty much it just the background is gray and it uses that font you can see the page is empty so the first thing we have to do is actually just create a nav element give it a class that's fine we're going to give it a background of white a shadow and a margin bottom of 10. so as you can see in the final version it's full width white and it's got a margin bottom of 10 here that separates it from the next element i like to use margin bottom instead of margin top on the next element but that's just me we refresh nothing happens because there's not actually anything within this nav bar but if i put some text in it you can see that it's there next we have to create a div element because what we want to do is is center the content within the nav bar within like a max width in this case of 3xl that's predefined in tailwind i don't want it to be full width because that looks weird in my opinion and for a personal blog i needed to be aligned with the width of all the other content which you can see is done perfectly here this is something that i had to tweak from the component set from meraki and i'll show you how to do that so i set max width of 3xl give it an mx auto so it's centered and if i close this up and put something inside you'll see that it is centered there's going to be space here and there within here i need another diff but before i actually do that i'm going to add some padding so i want padding top and bottom of 3 i want padding left and right of 6 but only for mobile and since tailwind is mobile first it's going to interpret this as the style for everything unless we include a medium break point and set it to something else in this case zero now the reason for this is because on a mobile browser i need a little bit of padding on left right parts of the navigation bar so there's they're not touching the corners the edges of the screen on the desktop version there should be space left anyways because browsers are quite wide on the computer so i don't need that padding there continuing on we also want this to be flex if we're using something that's past the medium break point we also want justify between and we also want items centered so they're centered vertically and i've got some alpine stuff that i'll need to include but we can get to that after for now we just need to know that if i put test in here it looks something like that i'm actually zoomed in if we go to 100 that's what it looks like which is pretty close to the final product the final product has a little bit greater height because the image here but it looks pretty close already so let's continue on next i need another div here like another container we'll give this a class of flex justify between and items center justify between is going to push the elements within this div to opposite ends of the container on the left and the right and this is really useful because in the final product while in the mobile version there's going to be like a hamburger menu and here there's obviously the name and the icon so they need to be on separate ends within here we're going to need two div containers so div class and this one to start is going to be this one to start is just going to use flex and item center and within here we're going to have the image and i'm going to give it a class and it should have an alt but for this for the purpose of this tutorial i'm just going to leave that blank the source is going to be just an image pulled from my current blog it's just a picture of me actually and the classes that we're going to use are height of 8 a shadow rounded full so it actually becomes circular completely and if we refresh we see that the icon is there which is great and it does actually if you zoom in it will have like a very slight shadow you can see perfect so the next thing we want to do is actually add the text so i'm going to make an a tag with an href and i'm going to link it to nothing for now and for now in here i'm going to put my name refresh my name is there and the reason my name is beside there is because we're using flex up here and then item center centers them vertically so even though the image is actually taller the text is right in the middle which is exactly what we want in terms of classes for starters i'm just going to add a margin left of 4 to space this out a little bit and in here i'm going to put text gray 800 text excel hover text gray 700. just give it a little bit of an effect when we hover over and this should be xl so when we hover you can see a little bit of an effect let me zoom in yep just ever so slightly which is cool and so this part's actually done what we have here now is going to be the mobile menu button and so what i need to do in here is make this flex and when we're over the medium break point it's going to be hidden we don't want to see a hamburger menu if we are over that break point in here is going to be a button and it's going to be a type button we're going to give it a class and within here we're going to make it text gray 500 hover text gray 600 on focus there's going to be no outline and that's just something to typically do with hamburger menus because the browser is going to make some ugly outline around on focus and you don't want that and also on focus we want the text to be gray 600 and just for completeness sake we also want to add an aria label which in this case would be toggle menu within here there's going to be an svg but i don't want to type an svg out so i'm just going to copy it over okay we got our svg as you can see here and if we now go to the browser and refresh nothing will have changed but if we inspect and go into a mobile view you can see we have a hamburger menu there it is so it's a little bit too light but that's very easy to change i'd like to move on to the bottom of the menu now and actually making it work because when this clicks i want that menu to actually show up so how do we do that well first we actually need to build the menu because for now we just have basically like a label where my name is and the icon is and also that hamburger menu so if we go down here and we can just label this menu if mobile set to hidden and what we're going to do here is just create a div with the class and this class should have mdflex item center and in here this is another div within it and i'll explain this as i go but this should also be flex and flex column because we want everything within this container to be stacked instead of side by side but unless it's on a desktop view then we want it to be flex row so it's side by side like i said tailwind is mobile first so it's going to interpret the flex column first but if it finds a medium break point class being used it's going to set that one when that break point is reached and also on on the desktop version we want a margin left of six and so if we close this up we can go and put links actually in it so we can make an a class and set this to margin top and bottom of one text sm text gray 700 font medium hover text indigo which is cool 500 and on the medium and above we're going to add a left right margin of four and on medium we're going to add a margin of top and bottom of zero and this will make sense in a second and we just need an href and for now it's going to link nowhere we can close this tag up and this one i'll name them after i copy them so we need three this one we can make home we can make this one about and this one can be contact if i save this and refresh you can see that this actually doesn't work because we don't have any alpine being used to toggle that in on and off but in the desktop view it looks great it's a little bit different than what i have here because i only have two menu items but if i zoom out it looks pretty much identical so how do we make the mobile menu work well that's what alpine comes in for if you're unfamiliar with alpine alpine is just makes it really easy to go into your html and make things reactive all you have to do is basically define an x data on your outermost container and in this case i'll just put it here so it's easier to see and in here there's a json format and in here all i want to track is is open and by default is open should be false what triggers this to be true well when this button's clicked and we can use at click and just trigger is open because this element is within this container so now this x data is available to it we can trigger is open to be equal to true right well this actually will work the first time if we set the element to be closed below it by default but it will not work when we try to close it again so what we need to do is just set it to the inverse of what it is so if it's if it's true set it to false if it's false set it to true and if we click this it'll do exactly that it'll do this with the hamburger menu this part is actually pretty easy we can just use x show if is open if we refresh and click here it works and it works great i'd add a little bit of padding here in this case actually i'd add a little bit of margin let's say margin four let's see if that looks better sure does if we go back to the regular one now we can see that we have another problem now this has disappeared so what's the solution here so the solution i've come up with to fix this issue where this not showing up at all on desktop but it is for mobile is to actually just make this show up block when we're on the desktop and remove this x show and use i guess what's called a class binding i'm not sure what the technical name is with just a javascript ternary in here it's going to check if is open is true and if it is we're going to use the tailwind show class and if it's not we're going to use the tailwind hidden class and if we refresh now we see that our menu comes up but with weird padding if we go to mobile and we zoom in just a little bit we can see that our menu does actually work clicks and everything we can close it but we do have that issue with the padding so this just goes back to tailwind being mobile first let me zoom in so we can see what's happening clearly and it has that padding at the top that i added earlier but we don't want it on desktop and we can see that that's being added here so what we want to do is just let this mt4 default for mobile when we reach the md breakpoint we can add a margin top of zero and now it's back to normal so if i go to inspect and we go to mobile and we click here we can see that it's still here it's spaced nicely and that is basically it so if you enjoyed this video please do consider subscribing i'll be making more as i go down and basically create this whole thing through a series i've also created a video that goes through using the laravel wink package to create a blog very easily it's faceless so you have to create the front end yourself but with tailwind and and these tutorials i'm very confident that you can build it very easily and it's a great project to add to the portfolio again i've left a link to cloudways.com below if you want to support the channel and if you're looking for somewhere to easily deploy your projects to i would definitely take a look there they're affordable very easy to deploy to secure they've got a ton of features and i probably will end up making a video about deploying there at some point and the last thing i just want to mention is that these components do come from merakiui.com i'll also include that below they make it very easy to get started and you just have to tweak to basically fit your use case and this is a great resource so thank you for watching and i hope to see you in the next one

Channel: David Grzyb

Views: 16,424

Keywords: tailwind navbar, tailwindcss navbar, building a navbar with tailwind, build a navbar, tailwind, tailwindcss, css

Id: L6Jwa7al8os

Length: 13min 25sec (805 seconds)

Published: Sun Nov 01 2020