In this lesson, we are finally going to build a navigation bar. Initially, I was very confused about if I should use ant design or make it entirely by myself. I tried out some designs and finally decided to make it myself. It's entirely a personal choice and you're free to use ant design if you wish to.

Let's start by creating a new folder inside the src directory and name it components. Inside components, let's create Navigation.tsx file.

Let's import React from react to begin with. Now let's create a Navigation function and return a div parent and let's give it a class name, nav-container, because this is going to be the topmost layer of our navigation bar. Inside the nav-container div, we need to make another div element. Let's give it a classname of nav. Now I'm planning to keep the logo and the navigation links on the left and the search bar on the right. Let's create two more div elements inside nav div and we can call them nav left and nav right. Our nav left div will contain logo and two navigation links, so let's create an image tag. Let's give it alt name of logo and as source, you can simply download it from the given link.

https://learnify-assets.s3.amazonaws.com/Images/logo.png

After downloading it, paste it inside the assets folder in the src directory. On top, let's import Logo from ../assets/logo.png. Now, we can simply use Logo as source in our image tag. We need links as well so let's create an unordered list with classname, nav left list and for now, we need to list items so we can simply write nav left list item \*2 and press tab. This will create two list items for us with same className; first one should be categories and the second one should be Courses. We're good for now for the nav left. For the nav right, we only need a search bar, so let's create a form tag first with classname nav right search, and inside the form, we need to have our input tag of type text. Classname will be nav right search input and placeholder will be Search Courses.... Guys, don't hate me for using these weird classNames. It's just that I'm used to writing sass this way; I find this easy to arrange. A lot of frontend developers prefer nesting.

Alright. Now we need an icon to be placed inside the search bar. We can use react-icons, so let's install it. Inside the terminal, type:

npm install react-icons

Once it's installed, we can import star which means everything as FaIcons from react-icons/fa which stands for Font Awesome. If you're into frontend development, I'm pretty sure you must have heard about them. Moving on, inside the search form, we can make a button tag with classname nav right search button. Inside this tag, we can use FaIcons.FaSearch inside a closed tag. This is how we use icons with react-icons.

learnify/client/src/components/Navigation.tsx

import * as FaIcons from 'react-icons/fa';

import Logo from '../assets/logo.png';

const Navigation = () => {

  return (

    <div className="nav-container">

      <div className="nav">

        <div className="nav__left">

          <img src={Logo} className="nav__left__logo" alt="logo" />

          <ul className="nav__left__list">

            <li className="nav__left__list__item">Categories</li>

            <li className="nav__left__list__item">Courses</li>

          </ul>

        </div>

        <div className="nav__right">

          <form className="nav__right__search">

            <input

              type="text"

              className="nav__right__search__input"

              placeholder="Search Courses..."

            />

            <button className="nav__right__search__button">

              <FaIcons.FaSearch />

            </button>

          </form>

        </div>

      </div>

    </div>

  );

};

export default Navigation;