All language subtitles for 6. Using Grids - Navigation

If you remember from the documentation, we actually have a spacing property, which we can add to each

container.

So if we add right after the direction equals column a spacing property of two.

That's going to create a 16 pixel margin around each grid item in this container.

So let's go ahead and add that to each of these, a spacing equal to two.

Spacing equals two, spacing equals two.

And lastly, spacing equals two weeks.

Got all those?

We'll save that.

We'll see the page refresh and now all of our links are spaced out between one another.

Now, though, I want to add some space between our columns as well as get us off of the very top right

there where it's pushed all the way against the edge of the footer.

So let's now come up to our first grid item.

So the main grid item within the container and we'll add a class name here of classes, dot grid item

K and we're going to copy that class and on each of these grid items.

Make sure you don't delete that little bracket there on each of these grid items.

We're going to paste that class name.

Space, the class name.

It's the class name.

Paste the costs name.

And we're going to come up and we'll add our grid item style with just a margin of three M.

And so that will put a responsive margin all the way around our footer links, which should look appropriate

for all screen sizes.

So if we go ahead and we save that, we'll see the page refresh.

And now our footer is looking much better with a very nice spread out feel to it.

I think that this actually works exactly how I had designed it.

And the only thing that we have now is to actually make these links work.

You see, right now, we can't click on any of these.

And that's because we haven't set up any of the navigation.

So let's go up to the top of our foot or dot G.S. file and let's import the link from react router Dom.

And I'm just going to move this up underneath the react statement.

Just clean that up a little bit.

And on each of our most innermost grid items, we're going to add the component prop.

And just like on the buttons and on every other material UI component.

This is going to allow us to pass in the link functionality to our inside home grid item while maintaining

the correct styles.

So this means we also need a two property to be passed down which route we actually want to navigate

to.

Let's go ahead and copy both of those props and we'll go ahead and add that onto each of our grid items

for each link.

But make sure to change the route to the correct route.

So for each of these services tabs, we're going to set custom software.

And then for this one and set the mobile apps and the Web science pages.

Make sure you get that inside the quotes and then we'll keep coming down and do the same for all of

these links.

Revolution.

And these ones for the revolution will all just go to the revolution page.

Revolution.

And same thing for here.

We'll just do the about page for all of these about.

And finally, for our slash contact.

So if we go ahead, we save this.

We'll see the page refresh.

And now we've actually got an underline under all of these links because they're being styled as links.

So to get rid of that, let's go back up and where we already have our link style.

Let's go and add a text decoration of none.

And if we save that, that should go ahead and remove those stylings while still creating links to all

of our pages.

So if we go ahead and select these services button there, we'll see.

We're now on the services tab.

So with that, you can see that our footer is working and that this looks great.

This looks exactly how I designed it.

And you can really see how the grid component creates a very consistent alignment and feel.

One thing to notice, however, is that while we are at these services, root rendering our services

content to the page, we're actually still sent to the home active tab.

And that's because these, although they are routing, are not connected to the system we have managing

our active tab.

So to take a look at how we're going to address this, we're gonna have to do a little bit of a refactor

in the next video.