Alt Text

Welcome to part-3 of the series. We will start where we had left and will first add a layout.css inside the components folder. This will contain our global styles.

layout.csslayout.css

We also need to import it in Layout.js so that it could be included in every page.

Layout.jsLayout.js

Now, it update all our pages with this css and we can find the change in page background and font family.

Page changedPage changed

Let’s make the Navbar component now. We will first install a package called react-icons, which will help us show nice icons in our project. For this go ahead and exit gatsby develop and then npm install the package, in your project directory.

    npm install --save react-icons

Make sure to start your gatsby develop again.

Next, we will create a folder constants inside src and a file links.js inside it.

The contents of links.js is below. We will use it at various places in our project to navigate to different links.

links.jslinks.js

Now, let’s start creating our Navbar component. So, go ahead and edit you Navbar.js file as below. We will add new imports first.

Navbar.js headerNavbar.js header

As you might have noticed, we are using a logo for our Navbar. Create a images folder inside src folder and place a file logo.png in it. You can get it from my github account.

logo.pnglogo.png

Now, we will complete our Navbar.js where, we are using the useState hook to toggle our links on a smaller screen.

Here we are showing a react-icon FaAlignRight on smaller screen. When the user is clicking on the button, we are calling the function toggleNav, which will make isOpen to be true.

Now, when isOpen is true we will be loading different CSS classes, which will basically open a drawer to show the links on smaller screen.

Navbar.jsNavbar.js

Now, for the styles add a file navbar.module.css inside the css folder. The content of it is below.

    .navbar{
        background: var(--primaryColor);

    }
    .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
    }
    .brand-logo {
        width: 60px;
        height: 40px;
    }
    .logo-btn {
        background: transparent;
        border: none;
        outline: none;
    }
    .logo-btn:hover {
        cursor: pointer;
    }
    .logo-icon {
        color: var(--mainBlack);
        font-size: 1.5rem;
    }

    .nav-links {
        list-style-type: none;
        transition: var(--mainTransition);
        height: 0;
        overflow: hidden;
    }
    .show-nav {
        height: 200px;
    }
    .nav-links a {
        display: block;
        padding: 1rem 1.25rem;
        text-decoration: none;
        text-transform: capitalize;
        color: var(--mainBlack);
        transition: var(--mainTransition);
        font-weight: bold;
        letter-spacing: var(--mainSpacing);
    }
    .nav-links a:hover {
        color: var(--mainWhite);
    }
    [@media](http://twitter.com/media) screen and (min-width: 576px) {
        .navbar {
            padding: 0 2rem;
        }
    }

    [@media](http://twitter.com/media) screen and (min-width: 992px) {
        .logo-btn {
            display: none;
        }
        .nav-center {
            max-width: 100vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-links {
            height: auto;
            display: flex;
        }
    }

Now, our website navbar looks like below on larger screens.

larger screenslarger screens

And it looks like below on smaller screen, where we see a hamburger menu and on clicking on it, it goes down.

Hamburger menuHamburger menu

This completes part-3 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.