All language subtitles for 21. Section Cleanup Continued

Now that we have access in the landing page to our set value and set selected index functions what's

come up to our landing page file and on each of the buttons that we had just added to navigate.

We also need to add the select value to set the correct active tab.

So we'll start with the Free Estimate button here in the hero block and we'll add the on click function

and we'll set this equal to our props dot set value and we'll set the value to five.

Remember to clear the screen because when we go to slash estimate we don't want any active tab to be

set.

And we also need to make this an arrow function.

It's telling us here we have a problem though because we actually have not come up to our landing page

a function call and brought in our props which will be passed.

So now we have that.

And let's actually copy our on click handler right here and we'll use that for the rest of our buttons.

So on our revolution button we need to be setting the second index and down on the custom software button.

We need to paste the on click handler and set the first value for our services tab but then we need

to wrap this in a pair of brackets add a semicolon and also call props to set selected index to one

as well and that will make sure we're correctly marking our custom software development menu item as

being selected.

So we'll continue.

And on the button here for the Iaw and Android app block we'll do the same thing as well setting the

value to one for services wrapping in brackets adding a semicolon and also calling set selected index.

But now passing in two will continue.

And the Web site button here passing in on click sets the value of 1 Wrap with brackets semicolon prompts

does set selected index of three.

Now we can continue and in the revolution blog here for our button we'll just need to set a value of

2 again for the revolution and continue to the information blog.

And on this first button here for the and more this is going to about us and we'll need to set the third

third index.

And finally on the button below for you contact us we will set the fourth active index.

And now we're almost done.

But remember we have the estimate button here in our call to action as well as the more and more button.

So we need to pass our set value function down to the call to action as well.

So here where we're calling our call to action let's pass in the set value function equal to our props

dot set value function.

And with that set we can his save.

Go over to our call to action.

And here let's come to the first button for the learn more we'll paste in our on click handler and we'll

again call prop start asset value.

And this is going to the revolution.

So we'll set the second index but we also need to remember to come up to our function call and bring

in our props.

And then we can come down to the estimate button for the last time and we will set the props set value

of five.

We can hit save the page or refresh.

And now on our home page any of these buttons should properly navigate us as well as manage the active

tab.

So if we come over to this Learn More button and navigate to the revolution you can see we're now on

the revolution page for come back to the home.

We can come and use the estimate button.

Go to the estimate that clears off the active tab.

We can go back home.

Let's check the Iaw and Android app development page.

You can see services is marked as active.

And let's see in the menu I OS and Android app development is as well.

So it looks like everything should be wired up correctly.

Let's go through and test all these just to make sure.

So custom software custom software.

Very nice Web sites Web sites and Web sites the revolution again the revolution here in the info blog

all seems to be working.

But I want to come back down to the info blog and I'll point out one small little thing I noticed and

so here we are in the smallest screen size.

If I go ahead and click this check that out nothing happens and oh now it works.

But that first time you see some pretty weird behavior it's jumping over and then the next time we click

it it'll navigate us.

So that's really weird.

And I figured out that the reason for this is because of the absolute positioning that we're using to

set this up.

So if we come back to the landing page here and let's find the information block we're setting a position

of absolute onto the container that is positioning these and that is causing some weird behavior with

our click event.

So to fix this let's go ahead and we'll do the same thing that we had done in our call to action where

instead of using the div to set our background it's actually we'll go ahead and get rid of that div

OK and we'll come up and we will get rid of this position absolute get rid of that.

And now let's apply that style to our grid container and we'll apply the class name here of classes

dot info background.

If we go ahead and save that we'll see the page refresh and it looks exactly the same.

But now if we click the links were navigated directly so that went ahead and avoided our conflict.

And I think that that is the very last thing we needed for our entire home page to be working.

I noticed really quickly there on our button in the call to action.

We still have the old grey hover effect right there.

So even though it's working and all wired up we need to get rid of that grey hover effect.

So we had done that already here on the landing page for our estimate button.

If you remember wherever that style is that we use the hover selector to set the background color to

this nice light color and let's copy that and then go to the call to action and we'll scroll up here

to the estimate button style and above our breakpoint.

Let's just add that hover style.

Give it a comma.

Save the file and once the page refreshes you can see we now have the nice looking hover effect.

So everything else should be good.

I think I'm happy with how all this looks pretty good.

Another small issue that I've noticed is the here.

If we shrink down our page all the way to our extra small breakpoint and we scroll down to the information

section well here.

If we go ahead and scroll over you can see that there's actually some horizontal scrolling going on.

There is a little bit of extra padding on the page and that is something you always want to look out

for as you're working with your designs.

So make sure every now and then to try and horizontal you scroll to see if there's anything accidentally

causing an overflow.

In this case we can go and increase the size of this page a little bit and will inspect the page and

here you can make this bigger or smaller.

And here you can scroll over and to find the culprit.

You'll go through all the different divs here and you'll try and find the one which extends over the

boundary so you can see when I highlight over this div is covering up just the section on the screen

that it takes up and that extra white border is not being covered.

However we need to expand the divs within this to make sure that none of the child that divs are causing

the problem.

So if I come down and on this about us section let's open that div up and when we hover over it's child

we can see now that its boundaries are extending over into that extra space.

So this is what is causing the extra padding.

We can click on this and we'll see here that the spacing is being set on the grid item is setting a

width of 100 percent plus 80 pixels.

So we definitely don't want that.

We don't want it to be more than 100 percent more than the space available to it.

That doesn't make too much sense.

So we can actually just get rid of the spacing property on our grid item container within the information

block so we'll get rid of that and instead we'll come to the inner most wrapping grid.

So this grid container around our typography components and let's add a style here and we're going to

make this a ternary statement but first we'll set the margin bottom property.

And this is for our about us section.

So we're replacing this a spacing here with a margin so we'll check our matches.

X x s variable.

And if that is true and where in this column layout let's give it a margin bottom of 10 m.

Otherwise we'll just leave it at 0.

So we can save this and the page will refresh and you can see we've still got nice spacing here but

we no longer have the horizontal scrolling through we had seen before.

So that's another little bug to look out for.

And an easy process for discovering and fixing it.

So I hope you guys are really proud of this.

This looks great.

We've put in a lot of work so far.

So definitely go and take a break after this and do something non coding related for a while to refresh

your brain before we get back to now working with even more complex layouts as we begin to build the

rest of the Web site in the next section.