Navbar responsive with reactjs and styled components🚀

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/

Blog

Navbar responsive with reactjs and styled components🚀

Jhossuan Foad

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

Related