# Create a super cool Navbar using React and TailwindCSS

Hey Developer Community, as we all know, "Learn By Doing" is one of the best ways to learn new technology or concepts. So, today we will build a project which will help us to understand some concepts of **React JS**, **Tailwind CSS**, and **CSS.**

So without further delay, let's see what we're going to create and how we intend to build it

### Preview 👇


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1658058801799/J76UhIVcX.gif align="left")

Now, if you are excited to build this 👆 then let's get started.

# Prerequisties

- **Basics of React JS**
- **Basics of Tailwind CSS**
- **Basics of CSS**

> This blog will concentrate on the logic behind this project. For the styling, please see my [GitHub repo](https://github.com/reactplay/react-play/tree/main/src/plays/navbar) and follow along with it.

# Build Side Navbar

As you can see, there is two **div** present here👇. The first one contains the **side navbar**, and the second one has our **animation data.**


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658059228934/Nq2RgevM1.png align="left")

So, firstly we will build the side navbar.

- Step 1: Setup React project in the code editor. Here I am using VS code(You can choose as per your choice).

- Step 2: Setup Tailwind CSS in the project.

- Step 3: Create a ***components*** folder inside the **src** folder and then, create two files in it named ***NavBar.jsx*** and ***NavBar.css***. Like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658079273044/GGyfWM0OD.png align="left")

Step 4: Now, inside **NavBar.jsx** create a functional component. Like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658079651677/yqDSwTZQu.png align="left")

And import it into the **App.js** file. Like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658079776731/BwmPIl0Qg.png align="left")

Step 5: Start your **localhost** server by running the npm command. Like this👇

```
npm start

```
The output will look like this 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658079978777/NFC9VkQJf.png align="left")

Now, firstly we will build this 👇 list thing.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658080129915/dRyYe_CWn.png align="left")


Step 6: Now, we will write code for **Side Navbar** and some Tailwind CSS to it.

```
JS

import React from 'react'
import Collasp from '../navbar/assest/img.png'  //importing image
import LogoImage from '../navbar/assest/logo.png'  //importing image

export default function NavBar() {
    return (
        <>
            <div className='navbar-play-contain'>
                <div className={`w-64 duration-500 h-screen p-5 pt-8 bg-slate-900 relative md:w-30`}>
                    <img src={Collasp}  //using imported image
                        alt='collasp'
                        className={`absolute cursor-pointer rounded-full -right-3 top-9 w-7 border-2 bg-cyan-500`}
                    />
                    <div className='flex gap-x-4 items-center'>
                        <img src={LogoImage}  //using imported image
                            alt='play-logo'
                            className={`cursor-pointer duration-500`}
                        />
                        <h1 className={`text-white origin-left font-medium text-xl duration-300`}>Develop</h1>
                    </div>
                </div>
            </div>
        </>
    )
}

```
The output will look like this.👇[ If you are unfamiliar with Tailwind CSS, then you can take a guide from [this cheetsheet](https://nerdcave.com/tailwind-cheat-sheet)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658081248442/tEvUnMbrd.png align="left")

Step 7: Now, we will add the list. To add the list, we have to write this code.👇

```
JS

 {/* ListItems */}
<ul className="pt-6 menu">
     {/* Item1 */}
      <li
          className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
mt-2 menu-items}>
          <img src={ChartImg} alt="dashboard" />
          <span className={` origin-left duration-200`}>
              Dashboard
          </span>
      </li>
      {/* Item2 */}
      <li
          className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
 mt-2 menu-items} >
          <img src={ChatImg} alt="ideas" />
          <span className={` origin-left duration-200`}>
              Ideas
          </span> 
        </li>
        {/* Item3 */}
        <li
            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
 mt-2 menu-items `} >
            <img src={UserImg} alt="join" />
            <span className={` origin-left duration-200`}>
                Join
            </span>
        </li>
        {/* Item4 */}
        <li
            className={`flex rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
mt-9 menu-items `} >
            <img src={SettingImg} alt="build" />
            <span className={` origin-left duration-200`}>
                Build
            </span>
        </li>
        {/* Item5 */}
        <li
            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
mt-2  menu-items `} >
            <img src={SearchImg} alt="search" />
            <span className={`origin-left duration-200`}>
                Search
            </span>
        </li>
   </ul>
```
Now, the output will look like this👇

> **Note-**I imported an image from my local computer into the image tag. You can get the same photographs from [here](https://github.com/reactplay/react-play/tree/main/src/plays/navbar).

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658081657854/z53I6W2LB.png align="left")

Now, we made our side navbar, but it's not working. Now, we will add our **useState** logic to make this navbar work.

Step 8: Import useState, and create a new state named *open* and *setOpen*. 

```
JS

import useState from 'react'
const [open, setOpen] = useState(true);
```
Your code now should look like this.👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658124138733/iHc1k-b5y.png align="left")

Now we will write the code to collapse the navbar whenever we click the button.

## Collaspe Navbar

You may now view in our code that the width of our navbar is **64** pixels (w-64). So,  we need to change the width of the navbar whenever we click on the **collapse** button. So, to do this, we need to use **ternary operator** with our **useState** values.

So, make a new function named **handleClick**. Like this 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658124691902/vrBEHsoXv.png align="left")

It'll handle our **open** state. Now, alter the width of the navbar with the ternary operator. To do so, add the onClick function to the button picture.

Like this👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658125087636/GpMM5Pudek.png align="left")

The navbar will now be closed if you click the **collapse** button. But the list of the navbar will not be going to collapse. To implement, add the **open state** to each list item.
 
Like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658125384468/30jRXVkWi.png align="left")

Now, the whole output will look like this👇



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658993104975/_WxJVVu2E.png align="left")

And, the code of the above output will be👇 this.

```
JS

import React, { useState } from 'react'
import Collasp from '../navbar/assest/img.png'
import LogoImage from '../navbar/assest/logo.png'
import ChartImg from "./assest/Chart.png"
import ChatImg from "./assest/Chat.png"
import UserImg from "./assest/User.png"
import SettingImg from "./assest/Setting.png"
import SearchImg from "./assest/Search.png"

export default function NavBar() {
    const [open, setOpen] = useState(true);

    const handleOnClick = () => setOpen((prevState) => !prevState)

    return (
        <>
            <div className='contain'>
                <div className={`${open ? 'w-64' : 'w-20'} duration-500 h-screen p-5 pt-8 bg-slate-900 relative md:w-30`}>
                    <img src={Collasp}
                        alt='collasp'
                        className={`absolute cursor-pointer rounded-full -right-3 top-9 w-7 border-2 bg-cyan-500 ${!open && "rotate-180"}`}
                        onClick={handleOnClick} />
                    <div className='flex gap-x-4 items-center'>
                        <img src={LogoImage}
                            alt='play-logo'
                            className={`cursor-pointer duration-500 ${open && "rotate-[360deg]"}`}
                        />
                        <h1 className={`text-white origin-left font-medium text-xl duration-300 ${!open && 'scale-0'}`}>Develop</h1>
                    </div>
                    {/* ListItems */}
                    <ul className="pt-6 menu">
                        {/* Item1 */}
                        <li
                            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
mt-2 menu-items `}>
                            <img src={ChartImg} alt="dashboard" />
                            <span className={` origin-left duration-200 ${!open && "hidden"}`}>
                                Dashboard
                            </span>
                        </li>
                        {/* Item2 */}
                        <li
                            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
 mt-2 menu-items `} >
                            <img src={ChatImg} alt="ideas" />
                            <span className={` origin-left duration-200 ${!open && "hidden"}`}>
                                Ideas
                            </span>
                        </li>
                        {/* Item3 */}
                        <li
                            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
 mt-2 menu-items `} >
                            <img src={UserImg} alt="join" />
                            <span className={` origin-left duration-200 ${!open && "hidden"}`}>
                                Join
                            </span>
                        </li>
                        {/* Item4 */}
                        <li
                            className={`flex rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
  mt-9 menu-items `} >
                            <img src={SettingImg} alt="build" />
                            <span className={` origin-left duration-200 ${!open && "hidden"}`}>
                                Build
                            </span>
                        </li>
                        {/* Item5 */}
                        <li
                            className={`flex  rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 hover:bg-gray-50 hover:text-slate-900 rounded-md
mt-2  menu-items `} >
                            <img src={SearchImg} alt="search" />
                            <span className={`origin-left duration-200 ${!open && "hidden"}`}>
                                Search
                            </span>
                        </li>
                    </ul>
                </div>
                <div>
                </div>
            </div>
        </>
    )
}


```
Now, we will make this card component.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658125715120/Ppujh3B4L.png align="left")

# Card Component

To create a card component, make a new file inside the components folder named **Background.js**. 👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658211118904/vRhgJo4_R.png align="left")

We will now use **Backgrounds.js** as an API. Define the info that'll be visible on the card within this file. Like this.👇

```
JS

//importing card image

import dash from "./backgroundImages/bg_dashboard.png"; 
import ideas from "./backgroundImages/bg_ideas.png";
import join from "./backgroundImages/bg_join.png";
import create from "./backgroundImages/bg_create.png";
import search from "./backgroundImages/bg_search.png";


const Backgrounds = [
    {
        id: 1,   // this is the unique id
        title: "Dashboard",  //Title to show on card
        type: "dashboard", //Type will help us to show different cards
        description: "ReactPlay is an OpenSource to Learn, Create, and Share ReactJS Projects",  //This is the description to show
        statement: "Know More", //This is the content to show on the button
        image: dash, // Image you want to show on the card
        url: "https://reactplay.io/" 
    },
    {
        id: 2,
        title: "Ideas",
        type: "ideas",
        description: "Looking for project ideas to practice React? Great, click down below for some ideas to get you started.",
        statement: "Get Ideas",
        image: ideas,
        url: "https://reactplay.io/ideas",
    },
    {
        id: 3,
        title: "Join",
        type: "join",
        description: "Join us on Twitter and be a part of ReactPlay Community",
        statement: "Join Now",
        image: join,
        url: "https://twitter.com/reactplayio",
    },
    {
        id: 4,
        title: "Build",
        type: "build",
        description: "Ready to create a new play? It is super easy, click down below to get started.",
        statement: "Create Now",
        image: create,
        url: "https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
    },
    {
        id: 5,
        title: "Search",
        type: "search",
        description: "Start browsing the plays built by our community developers.",
        statement: "Browse Now",
        image: search,
        url: "https://reactplay.io/plays"
    },
]
export default Backgrounds;   //exporting backgrounds.js

```  
- Now import **Background.js** into **NavBar.jsx👇**


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658211734251/wsfHUmqMQ.png align="left")

### Fetching Data

Now, we will fetch out **Backgrounds.js** file data. Create a **useState** for fetching.

```
JS

    const [data, setData] = useState(Backgrounds);

```
Now, create a **div** inside the **navbar-play-contain div**

```
<div>

</div>

```
Now, inside this div, we will use our "**map function**" to fetch the data from the "Background.js file. 

```
JS

   {data.map((values) => {
                        const { id, image, title, discription, statement, url } = values
                        return (
                            <>
                                <div className={`card ${show} `} key={id}>
                                    <img src={image} alt={"card-images"} className={`images`} />  //card image

                                    // on hovering over the card 👇 this code will run
                                    <div className='hover'>
                                        <h2 className='heading'>{title}</h2> //title of the card
                                        <div className='text1'>{discription}</div>  //description
                                        <a href={url}> <button className='button'>{statement}</button></a> //button
                                    </div>
                                </div>
                            </>
                        )
                    })}

```
So, here I used the map function to fetch the data from the "background.js" file. Here,

 - **data** is the useState that we created earlier.
 - The parameter **values** is where we'll get our *id*, *image*, *title*, *description*, *statement*, and *url*.
Then we have the **div** that shows the card and **image** that shows the image on the card.

Then there's the code, which is only visible when we hover over it.

After that, we'll add some CSS to make our card look nicer.

### CSS for Card

- In CSS, we will use some common properties of CSS like transform, opacity, transition, display, etc.

```
CSS

.navbar-side-card {
  position: relative;
  top: -18rem;
  left: 8rem;
  display: flex;
  height: 330px;
  width: 220px;
  background-color: #191c29;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  text-align: center;
  border: 2px solid rgb(88 199 250);
  overflow: hidden;
  transition: .6s;
  box-shadow: 0px 0px 100px rgba(88, 199, 250, .15);
}

.nav-card-images {
  position: relative;
  font-size: 33px;
  font-family: roboto;
  color: rgb(88 199 250);
  font-weight: 100;
  letter-spacing: 1px;
  transition: .7s;
  transform: translateY(110px);
  top: -23px;
  border-radius: 15px;
}

.navbar-side-card:hover .nav-card-images {
  transform: translateY(-150px);
  opacity: 0
}

.nav-side-card-description {
  color: #dbf9ff;
  font-family: roboto;
  font-weight: 100;
  font-size: 14px;
  width: 170px;
  line-height: 25px;
  transform: translateY(200px);
  transition: .7s;
  opacity: 0
}

.nav-side-card-heading {
  font-size: 38px;
  font-family: roboto;
  color: rgb(88 199 250);
  font-weight: 400;
  margin: 0;
  padding: 0;
  transform: translateY(200px);
  opacity: 1;
  transition: .6s;
  opacity: 0
}

.nav-card-button {
  transform: translatey(200px);
  transition: .88s;
  opacity: 0;
  width: 110px;
  height: 38px;
  border-radius: 40px;
  font-size: 12px;
  font-family: roboto;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 1px;
  color: white;
  background-color: #0beef9;
  background-image: linear-gradient(315deg, #0beef9 0%, #48a9fe 74%);
  border: none;
  cursor: pointer
}

.navbar-side-card:hover .nav-side-card-hover {
  display: block
}

.navbar-side-card:hover .nav-side-card-heading {
  transform: translatey(-170px);
  opacity: 1
}

.navbar-side-card:hover .nav-side-card-description {
  transform: translatey(-150px);
  opacity: 1
}

.navbar-side-card:hover .nav-card-button {
  transform: translatey(-100px);
  opacity: 1
}

.navbar-side-card:hover {
  transform: scale(110%);
  box-shadow: 0px 0px 100px rgb(88 199 250);
}

.nav-card-button:active {
  color: #0beef9
}

```
As you can see, our cards are now displayed just to the side of the navbar.👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658857659721/wZqDTNGmz.png align="left")

We must now only show one card at a time. That is, when we click on a navbar item, only that card is displayed. So, to do this, we will employ the **Filter Function.**

# FilterCards

To filter our cards' data, we'll need to use the "Filter Function." So, firstly we will make a new function named  **filterResult.**

```
JS

//below of handleOnClick function

const filterResult = () => {
//filter function 
}

```
- Now, we'll add a parameter to the "filterResult" function.👇

```
JS

const filterResult = (catItem) => {
   //filter function 
 }
```
- Now, we'll create a constant variable that will only store the card on which we'll click.👇

```
JS

 const filterResult = (catItem) => {
        const result = Backgrounds.filter((currentData) => {
        });
  }

```
Here **result** is the constant variable that will store that type of card that will click on the navbar. If you hover your mouse over the **currentData**, you will see something like this.👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658858997064/U2gBYHo3F.png align="left")

Here **currentData** will help us to know which item clicked on the **NavBar.**

- Now, we will going to return our card. 👇

```
JS

 const filterResult = (catItem) => {
        const result = Backgrounds.filter((currentData) => {
            return currentData.type === catItem; // Only return if the type of the current **Navbar** item is the same as the clicked **NavBar** item.
        });
    }
```
- Now, we will use our **setData** useState to show that particular card.

```
JS

const filterResult = (catItem) => {
      const result = Backgrounds.filter((currentData) => {
          return currentData.type === catItem;
     });
      setData(result)  // <-
  }
```
- Now, to make this function work, we will be going to add the **onClick** function in every list item of the **Navbar.**

```
JS

onClick={() => filterResult('dashboard')} // For the dashboard item, we will write dashboard, and for the **ideas item**, we will write **ideas** instead of dashboard.

// this **dashboard** is our **catItem** in the **filterResult**

```

- You have to do something like this.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658859984705/EDTa2x7oH.png align="left")

- Only the items linked with a particular item in the **Navbar** are visible when you click on it.

However, we must now hide all data and only show the card when we click on the **NavBar.**

# Hide and Show Card

Create a useState and give it a string value.👇

```
JS

const [show, setShow] = useState("opacity-0");
//Here **"opacity-0"** is our Tailwind CSS property.

```

Create a method that will assist us in changing the opacity from 0 to 1.

```
JS

const handleOpacity = () => {
   setShow ("opacity-1")
 }

```

Now use **show** useState as a class inside the **div** that has the class name of **navbar-side-card **👇



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658860719482/p6po0370Y.png align="left")

Now call the **handleOpacity** function inside the **filterResult** function.👇

```
JS

 const filterResult = (catItem) => {
      const result = Backgrounds.filter((currentData) => {
          handleOpacity();  // <- here we call handleOpacity function
          return currentData.type === catItem;
   });
      setData(result)
 }

```
Now cards are hidden. It will only be visible if you click here on the **Navbar** item.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658861047653/dPelb_Ikc.png align="left")


**NOTE-** If your card looks something like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658861120263/CI2bPcKkc.png align="left")

Then, modify the CSS of the card using the class name ".navbar-side-card."

We built our **Navbar** and the **Card**. Now it's time to create this 👇 box component.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658861292771/YFF77WCdi.png align="left")

# Build Box Component.

- To make this box, you must first build a new dive immediately above the **map function.**👇

```
JS

<div className={`card-content`}></div>

```
Here we have a div with the class name "card-content." Now create another **div** inside it with the class name **side-box-contentiner.**

```
JS

<div className={`card-content`}>
   <div class="side-box-contentiner"> //<- new div
   </div>
</div>

``` 
Now, inside this div, we'll insert the "para" tag.👇

```
JS

<div className={`card-content`}>
    <div class="side-box-contentiner">
        <p class="side-box-contentiner-sub">It is a responsive NavBar that helps you to navigate
        </p>
    </div>
</div>

```
Now inside this para tag, we will add our animated title. So, here I am using **ReactPlay.** You can write anything in it.

So, firstly we will HTML for it.

```
JS

<div className={`card-content`}>
    <div class="side-box-contentiner">
        <p class="side-box-contentiner-sub">It is a responsive NavBar that helps you to navigate

            // here is our animated title 👇
            <button id='side-box-neon'>
                <span id="re">Re</span>
                <span id="a">a</span>
                <span id="c">c</span>
                <span id="t">t</span>
                <span id="pl">Pl</span>
                <span id="a2">a</span>
                <span id="y">y</span>
            </button>
        </p>
    </div>
</div>

``` 

So, in this case, I'm using a **button tag** with the id **side box-neon**, followed by some **span tags** with different ids based on the length of the text. Now we will add some of the CSS to make it work.

So, the first thing that we have done here 👇 is: 

```
CSS

button#side-box-neon {  
  font-size: 29px;   //giving the font-size to the button
}

#side-box-neon:hover span {    //add animation on hover
  animation: flicker 1s linear forwards;    // The animation is called **flicker**, and it has a 0.1s delay and travels ahead linearly.
}

#side-box-neon:hover #a {
  animation-delay: .2s;  //here it lighup the letter **"a"** after **0.2seconds**
}

#side-box-neon:hover #c {
  animation-delay: .5s; // Same here. Here it lighup the letter **"c"** after **0.5seconds**
}

#side-box-neon:hover #t {
  animation-delay: .6s;   //same as above
}

#side-box-neon:hover #pl {
  animation-delay: .8s;
}

#side-box-neon:hover #a2 {
  animation-delay: .9s;
}

#side-box-neon:hover #y {
  animation-delay: .9s;
}

//**Note-** You can modify these delays to suit your needs.
```
- Now, we'll add **Keyframes** to make this fully functional.

```
CSS 

@keyframes flicker {  
  0% {
    color: #333;   //without hovering the color will be "#333"
  }

  5%,  //after 5%
  15%, //after 15%
  25%, //after 25% 
  30%,  //after 30%
  100% {  //and at 100%
    color: #fff;  //the light will belew up.
    text-shadow: 0px 0px 25px cyan;
  }

  10%,
  20% {
    color: #333;
    text-shadow: none;
  }
}

```

Now our project will look something like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658947540241/xoQerStqC.png align="left")
 
However, It won't work because there's a card on top of this, which is hidden. Now, if you click on any item of the **Navbar**, you can see that card too.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658947798015/G7F5BAkBo.png align="left")

Only when you click on this will the text **blow up**. 👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658947950354/chUSiEkkw.png align="left")

Now we will make a logic where we will increment the **z-index** of the card and click on the items on the **NavBar** will show the **card** and hide the **box**.

# Show Hide Box

So, firstly create a new state.👇

``` 
JS

const [hide, setHide] = useState(true);  //true == opacity-1

```
This state will help us to hide and show the **box** component.

Now, inside the **div** that has the class name of **card-content**, add this👇

```
JS

<div className={`${hide ? "opacity-1" : "opacity-0"} card-content`}>
</div>
```
Your code should look something like this👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658948439983/UK4OiFxJd.png align="left")

Now create a new function that will handle this **hide** state.

```
JS

 const handleHide = () => {
      setHide(false)
  }

```
And now call this function inside the **filterResult function**. 👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658948713397/NyCRA2yQE.png align="left")

If you click on any item in the **NavBar**, the card will appear, and the **box** will be hidden.
 - We'll need to reverse the opacity of the **card** and **box** to make it visible. Create a new function to accomplish this.👇

```
JS 

const reverseClick = () => {
    // This will reverse the opacity
  }

```
And now set the state of the **Hide** and the **Show**👇

```
JS

 const reverseClick = () => {
      setShow("opacity-0");
      setHide("opacity-1");
  }

```
Now call this function inside our **logo div**.

```
JS

<div className='flex gap-x-4 items-center' onClick={reverseClick}>
    <img src={LogoImage}
        alt='play-logo'
        className={`cursor-pointer duration-500 ${open && "rotate-[360deg]"}`}
    />
```
Your code will look something like this👇.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658989131629/hC6hMd4Uf.png align="left")

- Now, clicking on the **NavBar** items will hide the **box**, while clicking on the **Navbar logo** will show the **box**.

- And the last is to make the card invisible whenever the box shows up. Use the **Ternary operator** to accomplish this.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658990031814/Xrj-kFBaM.png align="left")

Now, your card will work fine. Now, let's build this part👇.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658990286240/YA4fw16gq.png align="left")

# Text Animation

This part is going to be the easiest part of this blog. First things first, create a new **h1** with the class name **side-animated-heading** just after the **div** that has the **side-box-contentiner** class name.Like this👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658990766299/pgLFqhloL.png align="left")

- Now, make a span and a **div**, and then inside this div, make more than three **divs** that contain our text animation. Like this👇

```
JS

<h1 className='side-animated-heading'>
    <span>Made with</span>
    <div class="nav-side-message-box">
        <div class="side-box-animated-word1">CSS3</div>
        <div class="side-box-animated-word2">React JS</div>
        <div class="side-box-animated-word3">Tailwind CSS</div>
    </div>
</h1>

```
And, your code will look something like this. 👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658990955666/ZpCR0fOgP.png align="left")

Now, you will see that your text will be visible to you. Now we will add animations using CSS.

## Adding Animation To The Text

- First, apply some basic CSS to the heading.👇

```

CSS

h1.side-animated-heading {
  color: #333;
  font-family: tahoma;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 610px;
}

h1.side-animated-heading span {
  font-size: 40px;
  margin-left: 2px;
}

```

- And for the text, we will give some padding, position, font style, and background.👇


```
CSS

.nav-side-message-box {
  background-color: #76cfe5;
  color: #333;
  display: block;
  font-weight: 900;
  overflow: hidden;
  position: absolute;
  padding-left: 0.5rem;
  top: 0.2rem;
  left: 220px;
  animation: openclose 5s ease-in-out infinite;  //here openclose is the animation name[you can give any name to this.]
}

```
At last, add the **keyframe** to the **openclose** animation.👇


```
CSS

@keyframes openclose {
  0% {
    top: 0.2rem;
    width: 0;
  }

  5% {
    width: 0;
  }

  15% {
    width: 150px;
  }

  30% {
    top: 0.2rem;
    width: 152px;
  }

  33% {
    top: 0.2rem;
    width: 0;
  }

  35% {
    top: 0.2rem;
    width: 0;
  }

  38% {
    top: -4.5rem;

  }

  48% {
    top: -4.5rem;
    width: 250px;
  }

  62% {
    top: -4.5rem;
    width: 250px;
  }

  66% {
    top: -4.5rem;
    width: 0;
    text-indent: 0;
  }

  71% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }

  86% {
    top: -9rem;
    width: 450px;
  }

  95% {
    top: -9rem;
    width: 450px;
  }

  98% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }

  100% {
    top: 0;
    width: 0;
    text-indent: 0;
  }
}
```

**Note** here👆 **0% to 30%** is for **first word(CSS)**, **33% to 62%** is for **second word**,  and from **66% to 100%** is for the **third word.**

Now, as you can see, our code works perfectly, and all you need to do is put the **Twitter Button** here.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658991759023/cvJ40I7pF.png align="left")

# Adding Logo

To add the logo, import the **Twitter Logo** from React icons.


```
JS

import { FaTwitterSquare } from 'react-icons/fa';

```

And, then use this icon inside the **anchor** tag.👇


```
JS

<a href='https://twitter.com/Shivamkatare_27'>
  <FaTwitterSquare className='side-box-twt-icon' />
</a>

```

Here.👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658991963037/6zf1sNL1E.png align="left")

# Coclusion

As you can see, we finished our project. I hope this blog has taught you something. If you learn something from this site, please share it with your friends and publicize it.

 - **Note-** For the CSS Styling, you can check out this [GitHub Link](https://github.com/reactplay/react-play/tree/main/src/plays/navbar)

- I contributed this project to [ReactPlay](https://reactplay.io/). If you want to learn more about it, you can read on [this blog](https://blog.reactplay.io/introducing-reactplay-learn-create-share-reactjs-projects)

- You can connect with me on [Twitter](https://twitter.com/Shivamkatare_27), [ShowwCase](https://www.showwcase.com/shivam-katare), and [LinkedIn](https://www.linkedin.com/in/shivam-katare/).