Introduction & Project Setup
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 Karla, 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.
Building the Basic Navbar Structure
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 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 need it 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.
Applying Responsive Padding & Flexbox
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 div, 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 breakpoint 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 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 breakpoint, 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.
Creating the Logo and Brand Name
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-xl, 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 breakpoint, it's going to be hidden. We don't want to see a hamburger menu if we are over that breakpoint. 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.
Building the Navigation Links (Desktop First)
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 a class. And this class should have md:flex, items-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 breakpoint class being used, it's going to set that one when that breakpoint is reached. And also 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-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.
Adding Interactivity with Alpine.js
So how do we make the mobile menu work? Well that's what Alpine comes in for. If you're unfamiliar with Alpine, Alpine 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 isOpen, and by default, isOpen should be false. What triggers this to be true?
Well, when this button's clicked. And we can use @click and just trigger isOpen. Because this element is within this container, so now this x-data is available to it. We can trigger isOpen 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 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 isOpen.
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.
Fixing a Responsive Layout Bug
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 isOpen 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 mt-4 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.
Conclusion & Final Thoughts
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 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.
