Navbar responsive with reactjs and styled components🚀
Published: 2022-04-18 00:50:45

Hola comunidad! 👋
Hoy les quiero enseñar a como hacer una barra de navegación adaptable para todos los dispositivos usando reactJs y styled components. Espero les guste. 😁

🚨CONOCIMIENTOS REQUERIDOS BASICOS: Css y ReactJs
👨‍💻Date el tiempo de leer y analizar, así se aprende y se entiende mejor.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l378zsoyge5aibch98bu.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/liuq9n8lquub1wefprgs.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa6tv00nw3bzjahj7dvm.png)


🚀 Lo primero que haremos es instalar react y los paquetes que necesitaremos.
```
npx create-react-app myblog;
npm install styled-components
npm install react-router-dom
npm install react-icons --save
```
🚀 Lo segundo que haremos es iniciar nuestro proyecto de react
```
cd myblog
npm start
``` 
Cuando ya hayamos hecho todos los pasos básicos e importantes como instalar react e iniciar el proyecto. Empezaremos a enfocarnos en lo que nos importa **el navbar responsivo**🥳

🚀Crearemos una carpeta llamada **components** dentro de **src**, te quedara la ruta asi: `src/components/`, dentro de esta carpeta crearemos todas las rutas o paginas que querremos en nuestro navbar.
> Claramente tu puedes colocar los nombres que quieras o como quieras
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wsnrgzxjaksu5r0t59w.png)

🚀Iremos a `App.js` e importaremos todos nuestras rutas o paginas y el enrutador así:

```
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import About from './components/About';
import NavBar from './components/NavBar';
import Home from './components/Home';
import Aprende from './components/Aprende';
import Portfolio from './components/Portfolio'
import Donaciones from './components/Donaciones'
```
🚀Después definiremos las rutas con `react-router` asi:

```
function App() {
  return (
    <>
    <BrowserRouter>
      <NavBar/>
        <Routes>
          <Route path='/' element={
            <div className="App">
              <Home/>
            </div>
          } />
          <Route path='/about' element={<About/>} />
          <Route path='/aprende' element={<Aprende/>}/>
          <Route path='/portfolio' element={<Portfolio/>}/>
          <Route path='/donaciones' element={<Donaciones/>} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
```

👨‍💻Nuestro código completo de `App.js` debería verse así:

```
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import About from './components/About';
import NavBar from './components/NavBar';
import Home from './components/Home';
import Aprende from './components/Aprende';
import Portfolio from './components/Portfolio'
import Donaciones from './components/Donaciones'

function App() {
  return (
    <>
    <BrowserRouter>
      <NavBar/>
        <Routes>
          <Route path='/' element={
            <div className="App">
              <Home/>
            </div>
          } />
          <Route path='/about' element={<About/>} />
          <Route path='/aprende' element={<Aprende/>}/>
          <Route path='/portfolio' element={<Portfolio/>}/>
          <Route path='/donaciones' element={<Donaciones/>} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
```

🥳Felicidades, acabas de terminar la primer parte y tal vez la mas importante, ahora vamos a los estilos lo cual será lo que le de vida y funcionalidad a nuestro navbar.

👌Lo primero que haremos es dirigirnos a `src/components/NavBar.js` e importaremos todo lo que necesitaremos.

```
import React, { useState } from 'react'
import { NavLink as Link } from 'react-router-dom'
import styled from 'styled-components'
import { FaBars, FaLaptopCode } from 'react-icons/fa'
```
`Nota: FaBars y FaLaptopCode son ICONOS que quise usar para mi logo 👍`

🚀Después de esto crearemos los _links_ que nos dejaran navegar por toda nuestra pagina y añadiremos los nombres de los estilos con styled components.

```
const NavBar = () => {
  return (
    <>
    <Navegacion>
      <BurgerBtn/>
      <Logo><span>Jhossua</span><FaLaptopCode className='laptop'/></Logo>
      <Panel>
        <Menu>
          <NavLink to='/'>Home</NavLink>
          <NavLink to='/about'>About</NavLink>
          <NavLink to='/aprende'>Aprende</NavLink>
          <NavLink to='/portfolio'>Portafolio</NavLink>
          <NavLink to='/donaciones'>Donaciones</NavLink>
        </Menu>
      </Panel>
    </Navegacion>
    </>
  )
}

export default NavBar
```

🚀Después crearemos la función de toggle que hará que nuestro menú hamburguesa sea desplegable y funcional. Es muy sencillo este código. Recuerda que estamos en `src/components/NavBar.js`
 

```
const [active, setActive] = useState(true)

  const toggleBtn = () =>{
    setActive(!active)
  }
```

🚨🚨MUCHA ATENCIÓN EN ESTA PARTE🚨🚨
🚀 añadiremos a `<BurgerBtn/>` la siguiente función asi: 

```
<BurgerBtn onClick={toggleBtn} />
```
`<BurgerBtn/>` lo puedes encontrar en esta misma ruta `src/components/NavBar.js` PORFAVOR lee muy bien, es sencillo.

🚀A los `NavLink` también les añadiremos una función sencilla, donde seteara `active` a true.

**ASÍ DEBERIA DE ESTAR QUEDANDO NUESTRO CÓDIGO DE** `NavBar.js`👍

```
import React, { useState } from 'react'
import { NavLink as Link } from 'react-router-dom'
import styled from 'styled-components'
import { FaBars, FaLaptopCode } from 'react-icons/fa'

const NavBar = () => {

  const [active, setActive] = useState(true)

  const toggleBtn = () =>{
    setActive(!active)
  }

  return (
    <>
    <Navegacion>
      <BurgerBtn onClick={toggleBtn}/>
      <Logo><span>Jhossua</span><FaLaptopCode className='laptop'/></Logo>
      <Panel className={active ? '' : 'active'}>
        <Menu>
          <NavLink onClick={()=>setActive(true)} to='/'>Home</NavLink>
          <NavLink onClick={()=>setActive(true)} to='/about'>About</NavLink>
          <NavLink onClick={()=>setActive(true)} to='/aprende'>Aprende</NavLink>
          <NavLink onClick={()=>setActive(true)} to='/portfolio'>Portafolio</NavLink>
          <NavLink onClick={()=>setActive(true)} to='/donaciones'>Donaciones</NavLink>
        </Menu>
      </Panel>
    </Navegacion>
    </>
  )
}

export default NavBar
```

🥳Felicidades, has terminado la segunda parte donde defines las rutas y añades funcionalidades para una mejor experiencia de usuario. Ahora presta **MUCHA ATENCIÓN A LOS ESTILOS** aquí le darás vida a tu navbar.

> Estos estilos son los mios, copialos, leelos y entiendelos. Ya después adaptalos a tus gustos 😁

Estos estilos, hazlos abajo de `export default NavBar` en la misma ruta `src/components/NavBar`

```
const Navegacion = styled.nav`
  background:#0D0D0D;
  height:4rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  @media screen and (min-width: 768px){
    justify-content:space-around;
  }
`

const Panel = styled.nav`
  background: rgba( 0, 0, 0, 0.9 );
  color:#F2F2F2;
  position: fixed;
  backdrop-filter: blur( 2px );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
  transform: translate(-100%, 0);
    &.active{
      transform: translate(0, 0);
    };
    @media screen and (min-width: 768px){
      transform: translate(0, 0);
      background:none;
      position:relative;
    }
`
const Menu = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  @media screen and (min-width: 768px){
    flex-direction:row;
    width:20rem;
    align-items:normal;
    width:inherit
  }
`

const NavLink = styled(Link)`
  padding: 3.5rem;
  width: inherit;
  font-size: 1.4rem;
  text-decoration: none;
  transition: 0.2s;
  color: white;
  &.active{
    background:rgba( 113, 65, 217, 0.85 );
    color:#fff;
    font-weight:700;
  }
  @media screen and (min-width: 768px){
    padding:1rem;
    &.active{
      background:transparent;
      color:#A772F2;
    }
  }
`

const Logo = styled.div`
  display:flex;
  align-items:center;
  margin-right:20px;
    span{
      font-size:25px;
      font-weight:700;
      letter-spacing:2px;
      color:#A772F2;
    }
    .laptop{
      font-size:25px;
      margin-right:10px;
      color:#A772F2;
    }
    @media screen and (min-width: 768px){
      margin-right:0;
    }
`

const BurgerBtn = styled(FaBars)`
  display: flex;
  z-index: 999;
  cursor: pointer;
  position: relative;
  transition: 0.5s;
  font-size:40px;
  left:10px;
  color:#A772F2;
  @media screen and (min-width: 768px){
    display:none;
  }
`
```

Listo, aquí hemos terminado. Espero te guste, te funcione y hayas entendido. Trate de hacerlo lo mas sencillo posible. Cualquier duda o inconveniente dejame un comentario y te ayudare en lo que pueda. 😁

¡Muchas gracias por leer! 

Jhossuan Foad Campos Díaz
Frontend Developer Junior - Autodidacta
+9 Meses de experiencia y contando.

Sigueme en TikTok: https://vm.tiktok.com/ZTdCCJmhs/