REACT NAVBAR WITH reactstrap
Tags: react, javascript, html, css
Published: 2021-07-20 08:54:56

Hello everyone today i am going to show you how to create a collapsible navbar with 'reactstrap', which is just like Bootstrap but with React components.



Few Commands before Diving into the code
```javascript
npm i reactstrap react-reveal bootstrap
```



First we will import the modules required here

```javascript
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,
NavbarToggler,Nav,
NavItem,NavLink,
Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'
```
Then inside the function we will set the states

```javascript
 const[toggle,setToggle] = useState(false);
 const isToggle = () => setToggle(!toggle);
//It is used to toggle the navbar here the initial
//state is set to false which means closed navbar
//isToggle is an arrow function which will change state
//of toggle to true and false
```

Now inside the return statement we will design the navbar-

```javascript
 <div className="">    
      <Navbar color="dark" dark style={{alignItems:"flex-start"}}>
        <NavbarBrand className="">
          <h1 className="mainLogo">Coder Academy</h1>
        </NavbarBrand>
        <NavbarToggler onClick={isToggle} />
        <Collapse isOpen={toggle} navbar>
          <Fade left>
          <Nav navbar className="text-center display-4" 
            style={{height:"55%"}}>
            <NavItem>
              <NavLink>
                <p className="navLink">Home</p>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink >
              <p className="navLink">Resume</p>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink >
              <p className="navLink">Why us</p>
              </NavLink>
            </NavItem>
            
            <NavItem>
              <NavLink >
              <p className="navLink">About</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink >
              <p className="navLink">Contact</p>
              </NavLink>
            </NavItem>
          
          </Nav>
          </Fade>
        </Collapse>
          
        
      </Navbar>
    </div>
```
ABOUT THE CODE - 

*Here we are using the tags instead of using bootstrap classes.

*Inside these tags there are attributes just like html tags.

*Then we did some inline styling to the elements.

*For the logo we have used the NavbarBrand tag.

*For the collapse icon we have used NavbarToggler Tag and inside 
 it we have attribute onClick which will call the isToggle 
 function and change the state of toggle to true or false.

*True - Open navbar and False - Closed navbar.

*Inside it we have Collapsed tag with attribute isOpen which have 
 value toggle, the value of toggle can be changed by NavbarToggler 
 element. 

*inside Collapsed tag we have Fade tag which is an animation tag 
 element from react-reveal library, on opening the navbar, it will 
 create a fade effect from left side.

*Then we created our Navbar inside Copllapsed with NavItem and 
 inside it NavLink.




Here is the full code - 

```javascript
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,NavbarToggler,Nav,NavItem,NavLink,Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'

function App() {

  const[toggle,setToggle] = useState(false);
  const isToggle = () => setToggle(!toggle);

  return (
    <div className="">    
      <Navbar color="dark" dark style={{alignItems:"flex-start"}}>
        <NavbarBrand className="">
          <h1 className="mainLogo">Coder Academy</h1>
        </NavbarBrand>
        <NavbarToggler onClick={isToggle} />
        <Collapse isOpen={toggle} navbar>
          <Fade left>
          <Nav navbar className="text-center display-4" style={{height:"55%"}}>
            <NavItem>
              <NavLink>
                <p className="navLink">Home</p>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink >
              <p className="navLink">Resume</p>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink >
              <p className="navLink">Why us</p>
              </NavLink>
            </NavItem>
            
            <NavItem>
              <NavLink >
              <p className="navLink">About</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink >
              <p className="navLink">Contact</p>
              </NavLink>
            </NavItem>
          
          </Nav>
          </Fade>
        </Collapse>
          
        
      </Navbar>
    </div>
  )
}

export default App
```

Here is the Css part -

```css
.navLink{
  color: aquamarine;
  transition: all 0.5s ease;
}
.navLink:hover{
  transform: scale(1.4);
}
.mainLogo{
  color: aquamarine;
}
```


Well i am just a newbie here so if You find any mistake please highlight it 
THANK YOU FOR READING THIS POST