Add a Shared Nav Component

[00:00:00]
>> So for our shared nav here, let's dive into the theme. So I'll collapse that site down. What I want is the name of the site up here. And then I want navigation over here, and the items will just kinda grow out from the site as we add more.

[00:00:18]
So by default, we're just gonna link to the homepage, cuz that's the only thing that we're pretty sure every site is gonna have. It's pretty rare that you don't have a home page on your site. So if that's the case, then I want to be able to let people configure, so for us, for example, I want the ability to set a link to the authors and to the books.

[00:00:38]
So in the theme, I'm gonna use just the site metadata, which is a built in way to handle this sort of information. So we can set the title, and we'll start by saying Gatsby Theme Shared Nav. And then in here, we can say navItems, and we can just set these to whatever we want.

[00:00:58]
So I'm gonna make it an array, I'm going to put in just the one for now. So the label will be the text that shows, the Home. And the path will be a forward slash for taking us to the homepage. And so this is gonna be the way that we configure this theme.

[00:01:12]
There's also a way, and I just realized I put this in the wrong place. Let me take this out cuz I was looking at the wrong Gatsby config. I want this to be in the theme Gatsby config, this one, so I'm gonna put that here. And then this one I want to leave, the site one we'll leave alone.

[00:01:34]
So this should, retriggered, did it actually start? No, so we're gonna notify dev, and that puts these into our GraphQL layer. So we'll see those as part of the GraphQL layer, something went wrong. Site meta data, yeah, that's correct. That was a helpful validation. I thought they would just go quietly and then we'd be really confused.

[00:02:09]
Okay, so it validated our config for us. And now we're gonna put this in. Now keep in mind, this is the Gatsby config for the theme, not the one for the site. So when I go out to graphical, and I reload, I can pull in the site and site metadata.

[00:02:30]
And it's gonna give me my title and my nav items. Gotta turn off this ID that we're not using. There we go. And so now we can just query this right out. So what I want to do is in my site, I just wanna override this. So I'm gonna take this part, I can copy it, move into the Gatsby config, drop this in and we're gonna say this is My Book Club.

[00:03:02]
And then we will skip the Home, we don't actually wanna go home, we're gonna do books and authors. Okay, so now that we've got that, if we rerun this query, we can see that it automatically overrode so that we've got these new values. Great, that's what we wanted.

[00:03:29]
We're gonna need some styles, so in the interest of keeping everything in one place and not jumping around between files, let's start with the styles for it. So the way that our nav is gonna work is it's gonna live in a container. And that container is gonna be up at the top of the screen.

[00:03:41]
So for that I want the background to be our dark color and then I want the color of it to be our light color. We will set it to display flex, because I want the logo on one side and the items on another side, remember? I will justify the content with space between and then we'll do margin 0.

[00:04:08]
We will do padding, 0.5 rem and we'll give it 5% of the viewport width on either side. And that'll give us a box that we can put things in. Then we're gonna have our shared nav. And that shared nav is going to be also display flex, because I want to justify content and put space between.

[00:04:32]
And I'm gonna put a little bit of a gap in there, so we'll give it a 1 rem gap. Then we're gonna style up the links in the nav. So we want those to be whatever the color of the nav is. We're gonna set padding so that it's a little easier to click on them.

[00:04:50]
And we will set the text decoration to none. And since we took the text decoration off, we gotta do a little bit of work to make these accessible. So let's do a link focus, link, not like. And a link hover, and then with those, let's just invert the background.

[00:05:11]
We will set the background color to be, Our light color, and then we'll set the color of the text to be our dark color. So that should signify pretty clearly that we are using what we're hovering over, what we focused on. So now that we've got that, we can set up our components.

[00:05:35]
So let's set up a nav.js, and in nav.js we're going to import everything as React from 'react'. We're going to import Link, useStaticQuery and graphql, From gatsby. And we're also gonna get the styles that we set. So the container, sharedNav, and link from styles/nav.module.css. And now we can export a function called Nav, which will be our nav component.

[00:06:24]
And I'm gonna start by getting data, that's gonna be usestaticQuery graphql. And we can set up a query here, we'll get our site, site metadata. And then we want the title, the nav items, and then we want the label and path for each nav item, oops. One more, good.

[00:06:52]
Then we can get out our nav items from data.site.siteMetadata, navItems. And we can return a header with a class name of container. Then we'll link to our homepage, and that's gonna have a class name of a link. And inside of it, we'll use the data.site.siteMetadata.title. All right, then we can set up our nav Items, so navItems.map.

[00:07:42]
And for each one, we're going to, Set up a link with a key of the, we'll give it a unique name, so nav item.path is somewhat unique, we'll make that okay. We'll link that to item.path, we'll give that a class name of link. And inside of it, we're going to put the item.label.

[00:08:15]
Okay, so now that we've saved that, we can import it into here. import nav from nav.js and then we'll use it right here. And let's go check it out. I missed something, I missed in my header a, I missed the end of my loop. And then I missed another closing parenthesis.

[00:08:58]
Hey, there we go, so that's better. That's a little weird, that's not exactly what I wanted. Maybe we should mess with this a little bit. Maybe we want these ones instead of being space-between to be flex, and I didn't wrap it in the nav is what went wrong.

[00:09:16]
So let's go back into our nav, and we're gonna put nav, and that needs a class name of sharedNav. And then we can drop this around and that should fix everything. There it is, that's what we were actually after. And so we can put that gap back in now, cuz that's a gap isn't.

[00:09:38]
Okay, good, all right, so we have a nice looking shared nav, we can go to the books page, we can go to the author's page. We can click around, get to where we wanna go. And this is all, I mean, this is great, right? This is what we want.