Build a sidebar navigation

[00:00] What I want to do is to push all this to the right, and then have a left sidebar that goes all the way down. So let's adjust the layout to fit in the new sidebar.

[00:15] We'll wrap everything inside a container, then we'll have the sidebar and another container for the top bar, and the main content. Now the main wrapper will be a flex with the minimum height set to the height of the viewport, so min-h-screen, then the sidebar will have a fixed width, bg-gray-50 as a background, and a border right.

[00:46] If we check this on a larger screen we'll see that the main content doesn't stretch all the way out. We can fix that by adding the flex-1 class, so I'll go here and say class flex-1, and there we go.

[01:00] The first thing I want to add to this sidebar is the logo, and for that I'll have a wrapper to add some padding, so we'll have a div py-4 px-6, then a link and the logo. Now for the logo, I have an svg snippet in my clipboard but instead of pasting it directly in here, since this is a jetstream application, I'll open the ApplicationLogo.vue component and replace its contents.

[01:33] Then we'll do application logo, let's say w-full h-9, and of course we need to import the component: import ApplicationLogo from, we'll go on up, Jetstream/ApplicationLogo, and save. There we go.

[01:58] Moving on, below the logo we'll have three navigation sections. So we'll do div mb-10 times three. We'll have main, library, and following. Let's style these headings a bit. We'll do h3.mx-6.mb-2.text-xs.text-gray-400.uppercase, and then tracking-widest - tracking widest will increase the spacing between characters, making small text easier to read.

[02:41] Now the logo, even though it has the same padding as the navigation headings, it appears to be misaligned. That's because my svg is messed up. So if I click here, there's this small spacing. Now, I'm not a figma expert, but I can just drop this here, remove this, I think, delete, and now it's all the way here. So I'll copy the svg, go back, open the application logo, and replace this one. And... that's better. Back to our navigation, let's add our first item which will be the home link. We'll also have an icon, and since we have heroicons installed, we can just do HomeIcon.h-5.w-5.text-gray-400, and let's say margin right two. Of course we need to import the icon, so I'll copy it, go here, save and there we go.

[03:49] Now let's align the icon with the label, and for that we can do class flex items-center, let's also give it some padding so px-6 py-2.5 text-gray-500, and on hover let's make it orange text-orange-600. Let's hover it, and there we go.

[04:18] It would be nice for the icon to also change its color when we hover. For that we can add group to the parent and then use the group hover variant to style the icon - and there we go.

[04:37] Now for the rest of the menu items, instead of duplicating this block right here, we can have an array with all the elements and then loop over them. So we'll go down here and say data return main navigation which will be an array where we'll have ref, label which will be "home", and then icon which will be HomeIcon. Then we'll have most recommended, which will have the HeartIcon and most commented which will have the ChatIcon. Let's import these and register them, and then go up and do v-for in main navigation, we'll have item.ref, item.label, and for the icon we'll do component, and then we'll pass an is prop which will be item.icon, and here we go.

[05:57] Let's do the same for the library. We'll get this, paste it here, and I forgot to add the key, so we'll do :key="index", and the same for the above.

[06:23] Here to make things faster, I will just paste in the items, and here we go. Now for the last section, the following section we'll have pretty much the same thing, but instead of an icon, we'll have an image url. So we'll have following, and then ref, label, and image url. Now if we go up we'll have basically the same thing, but instead of the component we'll have an image: w-7 h-7 rounded-full mr-2. For the source we'll have item.image_url, we need to replace this with following, and that's it.