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 ( <> } /> } /> }/> }/> } /> ); } 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 ( <> } /> } /> }/> }/> } /> ); } 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 ( <> Jhossua Home About Aprende Portafolio Donaciones ) } 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 `` la siguiente función asi: ``` ``` `` 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 ( <> Jhossua setActive(true)} to='/'>Home setActive(true)} to='/about'>About setActive(true)} to='/aprende'>Aprende setActive(true)} to='/portfolio'>Portafolio setActive(true)} to='/donaciones'>Donaciones ) } 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/

jhossuan

Navbar responsive with reactjs and styled components🚀

Join Our Newsletter. No Spam, Only the good stuff.