All language subtitles for 4. Adjust Navbar

Hi there, welcome back in the your lecture in the previous one, we have talked about the pitcher's

ability, we have multiple pages and they can navigate between them.

One problem is that we cannot see the number in other pages, so let's take a look at this and let's

fix it.

Although, you know, coding editorial space open a number of view, and I will show you a lot of value

you can access globally in all of your components.

Thanks to the rowdier we are using that installing here after the use, they're out there, they could

access one value globally in all of our components.

So I will show ID like, let's say, under the federal display.

I will display here the curly brackets and I will access here.

Dollar sign out, not above.

Usually, when you are installing the plug ins, they are injecting global values into your context

who can access them in all of your pages.

And usually these variables are prefixed with a dollar sign.

So and you can find all of this in the comment section.

So in this case, they're out there, they're something here.

We are using Apple to use its injecting, too out of context dollars, nine dollars and they're out

on their out.

We can access the current path we are navigating to, OK, you're asking where you can find his information,

you can find his information interview at our documentation.

It's very, very well documented.

And it's also noted there that you have access globally in your Typekit, in your templates to the dollar.

Sign around with the above.

Also in your script, you can access it.

Going to be able to show it to you later are going to be able to be progressing without without JavaScript

called.

So if you have access to the address and they're out above, let's take a look how it looks.

Refresh and you can see in the left top corner is empty.

That's out of home or out.

It's empty.

When people go to about, you'll see these is about being able to go to navigate through here to if

a queue here is if they queue so I can get the current drought register that are.

And logging in a survey to logging that is a logging, so I can access that out on every, every page.

So maybe you're asking now what you can do with this information.

What we can do here, we can simply write if statement and we can check if we are on some other out

than the home page then and then providing a different class or a different styling elements.

So instead of displaying it here, but it's not nice what's removed from here?

And that was rather conditional.

al-Abadi conditional here on the number here.

OK.

All right.

A conditional statement and I will add here additional A-Class, depending on the path.

Let's provide it on a new line, so it's easier to read.

And after the class, I will write the binder so I don't need to write a V binders, a column and I

will get your class.

OK, so this way I can provide here values from the variables, and I can I can conditionally check

here for the values.

So what I can do here, I can check it out here.

Let's assign here.

This was Roger Dollar sign around the power of.

Is equal to the empty slush.

OK, elevator territory operation, OK, so what's your question mark?

If the path is an empty slash, as you could see, provided me here is an empty glass, empty string.

Nothing there, really.

Otherwise what's provided me here?

Class leaf dash.

Background back drowned.

So is the ternary operation.

Here we are checking if the route path is equal to the empty slash, as you could see on the homepage,

it is.

This means on the homepage and is the statement is true.

We are going with a first expression here.

OK, so we are asking question is about about equal to the empty on the homepage?

Yes.

So this will be the empty.

On other other pages, the roadmap is different, as you could see this register register, such logging

in effect was less about, so it's false.

This way we are going with a second expression and if it fits the background, it'll be merged into

the class.

OK, so if you have a two attributes one, the static one basically and one dynamic one v bind, these

two classes will be merged together into the one class, as you will see.

OK, so, Diesel, let's say let's go back to Brussels there, let's inspect this page to right click

Inspect.

That's inspectors element and here and like, select this.

Although enough, but you can see the nail biter here is a Vif background, and this will be the background

for all of my pages, a part of my home page and I will go to the home page.

The Vif background is on here.

OK?

You can see there is nothing.

Only then able to go to my, let's say, such log in or some other pages.

Only there there is a brief background so that we can do some things here.

You can see in a zero.

The novel about a class is a transparent background, the transparent, but now I can override it,

they can write their background, background, let's say blue.

OK, and I will be able to see my items.

OK, that's all they need to do, I'm going to go to our case files, I'm going to just toggle the background

class and we need to assign their color.

Let's do it.

OK, we will have a closed modules and first looked at a variable.

It'll go to assets folder will go to styles.

They'll go to variables as he assists, that'll create a variable for a caller for background color.

Well, Roger, let's ride hear a dollar sign.

That's how you of writing variables in SC assess in a dark, dark blue national.

Every the name of the variable and the value will be.

They'll be hash four or four seven six five.

So we'll be this darkish call.

Or is it even blue?

Yeah, it's kind of blue.

OK.

So we have dark blue color, and now we can we can go to Maine access.

You will scroll around on line seventy three or so, let's go to 73 Lane.

There should be Heather Starling's you can see here and here is enough.

But our styling, so you can see the background is here, said that it's transparent.

OK, I will say here now and operator and background the background.

Like this?

OK, background will be our color.

We have created so this will be the dollar sign and there are dark blue colours that are some dark blue

color.

OK, soon enough, Bobby Harvey will have a big grin transparent, but then there will be a big glass

class together with enough butter.

Then don't go be the big.

Transparent, but go with it is dark blue collar.

So basically this will override the background transparent.

And that's it.

Not only will save it.

Go back here and refresh and then you go to home.

Your page looks like this, and it will go to about the fake, you log in and the register in the pages

looks.

Do they have a background?

The Navigator has a background, so guys, that's how you can check conditionally.

Remember, with the drought path, I was just recapitulate.

Then there the drought bob.

You can get the current path, what you are on.

So what do you having that you are a labourer, if that's empty, empty, if you are the home page,

you don't need to add any classes or empty string.

If you are on other pages, it's like sludge logging and slash about and so on, then access.

Let's provide a bit background class.

OK.

And these two classes are a match together.

One class when providing their tributes are starting grants, you cannot divide there variables.

But here is a dynamic weather directive.

Be bind you can provide.

Here is simple expressions and you can provide your values from the variables and you can write your

conditionals.

I think that's going to be it for this lecture, and the neglect will continue, and I will show you

how you can navigate between the pages without overloading the browser, you can see many will take

a look at the top of your top of your page here.

Every time I click on the page, it's a loading.

You can see it's slightly changing and it's reloading basically that page as navigations goes.

OK, so let's go on to your next lecture.

Yes.