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.
🚀 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
🚀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/
Top comments (0)