This is where we left off in the last video.

We need to somehow get it on the grid. Let's open up Firefox and I'm going to look at the grid on here. We have our layout grid, and we have our header, we don't really have our dashboard on the grid anywhere. We want them to be in their own dedicated div, like our bar and header.

So let's go ahead and do that by going to our code and instead of just returning TabNav let's return an actual div containing TabNav.

dashboard.js

render() {
    return (
        <div className='dashboard'>
            <TabNav tabs={this.state.tabs}/>
        </div>
    )
  }

Now if you go to it you'll see dashboard's in its own div except for it's in the top left corner.

And that's because by default it's just kind of fitting where the next open space is on a grid and the top left is what happens to be open. So it's going to throw it in there. So what are we going to do is go to our style folder and creating a new file and let's call it dashboard.scss. Now let's go import this into our main.scss

main.scss

// BASE
@import 'variables';
@import 'base';

// HEADER
@import 'header';

// AUTH
@import 'signin';
@import 'signup';

// HELPERS
@import 'form-title';
@import 'form-fields';
@import 'text-link';

// DASHBOARD
@import 'dashboard';

Now let's go with some styling. So it's a dog dashboard.

dashboard.scss

.dashboard {
    grid-row: content-s/content-e;
    grid-column: content-s/content-e;
}

The content-s and content-e that we used actually is coming from our base.scss, and it's used to place the main page information in the center of our page.

When we open up the dashboard, it just kind of has a bunch of items in here, and we're going have more things on the dashboard, not just tabs, we're going to have a bunch more components. We're going to be able to hit the tab and go to different routes. So what we need to do is package up that tab into its own div.

Let's go into our code and let's go tabnav.js, and instead of just returning an array of items, let's get rid of all the first code. That was mainly just to help you understand how we're going to get these items in here with props and, that's why we did that, but now we're going to actually write the component.

tabnav.js

import React, { Component } from 'react';

class TabNav extends Component {
  render() {
    return (
        <div className='tab-nav'>

        </div>
    )
  }
}

export default TabNav;

Their grades and you'll see it's now in its own little div within dashboard. We've got dashboard which contains the tab nav. Right now there's nothing in tab now because we obviously are just returning a div at this point but we are set up to actually do something in this and put it on the grid where we want it to be okay.

So the reason I did this backwards is because I wanted to quickly show you how we're going get the props in here to map over items and render those tabs. And I also wanted to further your understanding of how this all worked, how grid works, and how why we get these on their own div.

So that's why I took that more complex, backwards approach was just so you can understand it more because of the very fact that it is a little bit more confusing.

So now that we have this all set up let's go ahead and continue building out our tab-nav component in the next video.

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

Resources

Code at this stage