Highlighting Navbar items in Sveltekit

all right in the last video we created this navigation bar which uh now looks kind of similar to the one we have but maybe font size is a different now we are going to complete this so maybe I would like to change the font size quickly um which can be like 1 am here maybe 1.2 here which yeah which seems to be the right sizes maybe so this is quite big so maybe 1.5 that seems okay but it's too big three maybe right all right so I'm gonna keep this uh now I also told you that you know we are gonna highlight this now so in order to do that uh so we see this nav as as a as a component now because it's gonna be easier if we move it to its own component um so one thing one way to do that is like create some folder inside a source and do it or you can also create a component here itself and use it in this case um since it only belongs to the routes I'm going to create inside the routes itself I'm going to create uh not a folder I'm going to create a file call this now bar swell all right so nothing happens here nothing you know happens to the routes so it'll not even it will not be recognized by cell kit unless it has a plus besides it so I'm gonna move everything uh in swelt to this number and remove few things as well that is something we don't need okay now once this is there this is its own component now in layout we can remove the nav all together and but we still need a navigation so we're gonna put it here now bar this way but now bar isn't imported But If You observe swell kit automatically did that for us now until here we didn't write any JavaScript this would be the first place we write it even though our entire app will be in JS uh we didn't write any this is the first script tag now let's see what happens so nothing really changed if I if I comment this out now but it's gone and yeah so this is better because uh now we it's easier to maintain this layout like if we want to add some some more things like let's say a footer uh let's say something like a sidebar or something so in in those cases having it as a different component is very useful so in now bar uh I said we want to highlight right so something like you know uh let's say this a tag we might want to make it bold or something can't wait bold but uh we don't want all of these to be bold or you know uh change the font color uh we want them to have uh the that slash only when we are in active page so how do we get back to a page right so how do we know that we are in this home page that is through the URL so if I go to about slash about is something that we can recognize so this is a work page with with this letter Book now how do we get that here right so we can have script tags here that we already know but can we use window right so window dot location dot href so that's our path name or something so we know our location uh we cannot because it's it's gonna it's gonna throw errors right away so if I maybe refresh yeah it's it's gonna throw it though it's not defined so the problem with this is the JavaScript rewrite is gonna run on server as well so in server window object is is not present so for that case uh we we will have to learn like you know we can we can get away with maybe using on Mount because if you if you do that uh something like this uh it will be I think it is auto imported now if I do console log of this window this this should be this should be working so where did it get the type I don't want the type let's get download okay so if I refresh now things are working I think it will also give us the console okay so clear the location but is this the best way of doing it it's not because you know we you shouldn't be relying on window object uh because sweld has few things uh available for us which is called page so if you want that you can just import page from swelt uh stores now we don't need amount here we can actually console.log since it is a store the way to access that is using a dollar sign behind the variable so when I do that you see uh not sure why it is okay so it is it is not uh search it is it in the App Stores sorry open that now when I when I refresh here I should see the page object here yeah so it has all these things data is empty because we haven't gotten any data yet we haven't mentioned any endpoints or page.ts or page.js files now route and there is something called route ID which is which is useful you can also use URL and path name uh now maybe route ID is something which we want now if I uh go to other Pages like here about this thing is not showing the console log again again so we can do it reactively having a dollar and uh you know Poland and it will show us so router is this for this router ID is slash about so that is services so so on and so forth so that's good so what we can do is here we can do something like let a route ID and then we can do the route ID inside this you know reactive set and we can do page uh what was that case.row.com right yeah drought dot ID uh now with this you know we'll have already uh in fact you know you don't really need this let if you're using a reactive statements like this uh it will still work so what we can do here is we can add class uh in a uh you know uh class active maybe something like this active class we haven't mentioned this uh styles for this but you can do it what we can do here is uh in route ID equals oh right on page okay ready now if router ID is home so we'll have an active class so if I mention the active thing here not active I'll for this moment I'll do colors red I will change it later so if I go home page I have the red color because route ID is equal to so much now I can use the same thing for all these items which isn't isn't the best way but I'll tell you about the other way as well what services equals contact so when I do this uh all these pages are clearly highlighted so if I go to home page this is red so yes now here I think it is like you know initially they were like in a gray color instead of white so maybe it's a d or something and then when it is active it's white so if I go back uh it's clearly not identifiable so I'll do AAA yeah this seems like it so if I go to about now we clearly see about this highlighted and this is how you highlight your pages so uh in the next one I'll also talk about the best way of doing it and maybe we will try adding some more things here maybe the you know this hero yeah I'll see you in the next one guys thanks bye

Channel: WebJeda

Views: 2,803

Keywords: sveltekit, sveltekit tutorial, navbar

Id: KrSH82gg7BQ

Length: 9min 55sec (595 seconds)

Published: Fri Dec 30 2022