All right so basically what we need to do is pass in these tab-nav items so they can actually render this component. And the idea of this component is that we're going to render each component within here and then have it take up the entire screen. Let me switch to the design and further explain that because that probably didn't make much sense.

So we ever have NAV up above our bar, and in all reality, it's our whole entire page. This is going to be the entire tab-nav component. It's just that based on the one we have selected we're going to render a different component. Except for these couple items up here. So the tab-nav is really in a take of the whole thing. And we're just going to switch between components within it.

So now that you have an understanding of how we're going to do this, let's go ahead and start rendering these items within our application. OK so let's go into our application and we have our other items. So we go to dashboard.js. We basically have these as props we're passing them and we have them. So what we want to do is we want to display these.

Now at first they're both going to appear like they're not selected, and then we'll learn how we can make them appear like each one is selected when they are active. Right now we're just going to deal with rendering them.

So let's go to tabnav.js fill in our div and render the titles of each component. Eventually we'll also add an active function that will render our components when the tab is active.

tabnav.js

import React, { Component } from 'react';

class TabNav extends Component {
  render() {
    return (
        <div className='tab-nav'>
            {
                this.props.tabs.map((tab, index) => {
                    return <h1>{tab.title}</h1>
                })
            }
        </div>
    )
  }
}

export default TabNav;

Let's go back to our app and you'll see it says newsletter and requests. OK so let me Firefox and do the same. We can see the grid. Now how are we going to lay out these items right here? How are we going to make them look like they do in the design? We're going to do that by applying a grid inside of tab-nav, because tab-nav here contains two h1 tags.

So we have to make a grid of their own in here or use flex-box to make it 50/50, so we can head in the direction of what we have in the design, with newsletters on one side and requests on the other.

Okay. So I'm going to switch over to VS Code and instead of rendering in an h1, let's return an a tag, then we'll nest it into another div.

tabnav.js

import React, { Component } from 'react';

class TabNav extends Component {
  render() {
    return (
        <div className='tab-nav'>
            <div className='tab-nav__tabs'>
            {
                this.props.tabs.map((tab, index) => {
                    return <a className='tab-nav__tab'>{tab.title}</a>
                })
            }
            </div>
            <div>requests or newsletters content goes here</div>
        </div>
    )
  }
}

export default TabNav;

We also added a div with some text to show where our content will render. So let's see how this looks in the browser.

This is what I'm trying to aim for.

And this is what we have so far.

Now what we want to do is build the grid for tab-nav so we can get it on there properly. Right now we're kind of winging it and we don't actually have a grid for our top out here. And then you'll see what I was talking about earlier, that we're going to have div for these two items, and a grid. And that's going to be what distinguishes where they are on the on screen.

So let's go to our code and SCSS file for this. Let's go to style and call the new file tab-nav.scss. All right now let's go import this and then come back

Now let's go back to tab-nav.scss and write our selectors. We have our tabs and then we have our tab, and one will be the style applied to the items, the other will be the style applied to each one of those items.

tab-nav.scss

.tab-nav {
    &__tabs {

    }
    &__tab {

    }
}

Let's make our grid. We'll also need to check our design to see what the spacing is like for the application.

tab-nav.scss

.tab-nav {
    display: grid;
    grid-template-rows: [tabs-s] 50px [tabs-e content-s] 1fr [content-e];
    &__tabs {
      grid-row: tabs-s/tabs-e;
      background: cornflowerblue;

    }
    &__tab {

    }
}

In Firefox we can see that the item takes up the 50 pixels for the title and then the rest of our content, which is this div is going to take up the remaining content. Now it's only kind of getting at the height of what's in there. So what we can do is we can give this a class name and then tell it where it belongs on the grid.

We'll worry about that later though, because we want to get the tabs down. We don't really care about this bottom part yet.

So let's go ahead and in the next video we'll actually build out the grid for the tabs here and then we will style them and hopefully put in the functionality. Let's go ahead and commit our code

git status
git add .
git commit -m "tabnav grid"
git push

See you in the next video.

Resources

Code at this stage