Building a Navbar in Sveltekit

hi guys welcome back so in the previous one we set up a swirl kit on our local and in this one we are going to create some pages so if you look at um this website that we are going to create it has home which is the directory we already have it also has about service and contact so we are going to create these Pages uh right away here a circuit uses something called directory based routing so if you want any route here except for the home page you will have to create a directory of that name so let's say I want about page so I will have to create a folder called about and just by doing that you will not have that route so slash about will be a 404 only if you have I mean even if I have something like index or something here I will also not get that only if I have page Dot sweld inside it I will get something here like it's empty now so it's showing empty so if I have a boat it shows about there now that is about now we are going to copy the same thing maybe paste it several times so that we can rename them so how many pages we had I think so and yeah one more about is already done so services and let's rename this to content okay now that is done uh I will change the text as well so that it's easy plus two differentiate between the pages some Services I will have it as Services here sorry all right now those pages are there but there is no way to uh navigate through links so I will have to manually enter uh and go there now let's let's uh have navigation some kind of navigation here so let's call this and for home I'm just having simple text here you can have HTML so I will have a nav element Maybe and I will have uh an ordered list I will have a list item I will also have an a tag inside I will make the sense form and I will repeat this using Ctrl the card and down I think it isn't working okay I should do that again Ctrl alt shift and down everyone don't know yeah so this would be our Port page about this would be services and this would be our contact perfect okay so if I go to the home page I have these links maybe I can style this uh I will have a style type here and uh UL can be display Flex now if you want you can use Tailwind here it's it's pretty easy to install I will give you the directions to install the Tailwind maybe we'll eventually upgrade it to title bit we'll see I think that should take care of it but there will be uh gaps between them so and I uh should have margin right of maybe fix and also list style we don't want any style and then so that way yeah so this is quite good I will I can now navigate to other pages so let's say if I go to contact go to the about I can go to settings now uh we probably want this nav along with its Style in pretty much all the pages right so in that case we will create something called layout and we have this in that layout so if something is common on all these routes we can create a layout so for this uh all the pages inside routes as this navigation is a common thing so what I will do is I'll create a layout here it is called as plus layout Dot right now if I don't mention anything here all the pages will be empty if you go to contact or something it will be empty so what you should have is a slot so slot is a place where the content will be put in so nothing changes here so when I do that everything Remains the Same so yeah things are same but if I have something here in layout that will be common for all the pages so this is a nice concept so we are gonna move maybe the entire thing okay entire thing here above and remove this form thing maybe slot we can move it here it doesn't matter the order of this now what happens is in in all the pages we will have this now bar uh always present right so that's that's what this is now this is not quite uh looking like what we see here we can actually do that uh it just it's just that we have something like uh I think we have H H1 there we call this start bootstrap and this nav can also be Flex and uh we have start bootstrap and I zoom out here kind of seeing a similar thing now this H1 we don't want any margin for that I'm thinking it has some margin that is why it is doing that and uh why is this having margin let me check that the UL has margin I don't know why it has that didn't remove the margin here okay so that is gone it's it's quite big so one size can be one point I am or something and let's do 1.2 let's go one yeah one seems to be okay but it's still small um also want where it seems to be normal yeah so this is quite okay now home about service I will have to move them to the right so since nav is flex I can do this version left Auto and this URL will go to the right so that's that's good and the background I don't know what color is this I'll just get the color from there yeah this is the color so the entire nav has that pattern right I don't color like this I should have the background color yeah we do uh now this body has some so how do we apply we have to there is this app.html where body is so we can actually style it here if you want you can have a separate file create a file and do it for now I'll just have it here um so I have a style tag Define body then monster zero they should do it yeah it fixed it there so the color maybe we want it as white so we'll come back to the layout file where we have it all these things have color uh for the textile white so I'll just make it White this a tags maybe we have to mention it separately so I don't want any text decoration and also color I want it to be that in it but it seems like it's okay so maybe I have zoomed in if I zoom out hopefully and yeah this is quite small okay so this is this is okay I can get this fixed now usually what happens in websites is that it has it it won't always pan across the entire screen it will have a limited width um so that we can actually mention here are we can create a class called Dot wrapper or something oh uh it's usually called as container in most cases so we can do container we can have a Max width of uh maybe 1000 pixels and um Mars in the zero among top and bottom Auto among left and right so now in our layout I can have div container and put everything inside it and yeah this center line but then Flex has been moved so Flex should be container now so I'll call the class here so it is classes are scoped so applying container Flex here will not affect containers in other places so I have this here I think it's still large so we can actually go to app.html index.800 Maybe so that way it's smaller okay now font size seems to be less font size millennium maybe a little less like 9am seems to be fine it is a padding so we can apply the padding to the nav element before all this padding point I am Maybe so this looks quite okay but did I get the right color I don't think I got the right color so it seems like yeah something else okay this was a different color all together okay yeah now it seems uh quite okay the font uh don't worry about the font it's using a different font here let me check that if I click on body so yeah this is the font it's using so I can just uh copy that and go to here and add font family and paste the entire thing on C yeah now that should also be taken care of wow so it looks pretty similar but a little big so zero huh okay so it's it's quite small small maybe one em is not exactly the perfect size for it but we have uh now bar when you click on them so it goes to that particular page now here home and everything is like somewhere else now let's go to home and other pages and fix them now this let's just have a division around it so div Dot container okay home should be fixed here home came to the middle so I'll just use that every bears should be about now this is uh no since I'm using container everywhere Maybe I should have this in the layout itself um enclosing the slot right so that way all the content will go inside the container so yeah this is easier I don't know why I'm doing that the reputative work okay Ctrl Z control Z okay yeah yes so we have this navigation which looks quite similar to that I mean maybe uh this active state is something that is not there so in the next one I'll show you how to highlight the you know particular page all right I'll see you in the next one thanks face bye-bye

Channel: WebJeda

Views: 6,745

Keywords: sveltekit, sveltekit tutorial

Id: soiW6vyX6SM

Length: 16min 3sec (963 seconds)

Published: Thu Dec 29 2022