COMO HACER NAVBAR RESPONSIVE EN REACT CON HOOKS Y STYLED COMPONENTS

En este video les enseño cómo crear un navbar responsive en react con hooks y styled components de una forma fácil y con animaciones.

-------------------------------------------Links-------------------------------------------
Link a los archivos del proyecto:

Link al menu de hamburguesa en codepen:

Si te gustó el video y querés apoyar el canal, no olvides de suscribirte y darle like!

[romaoasis]

Excelente! muy bien explicado, me sirvió mucho.
Adjunto código para que el navbar se cierre cuando queda abierto en modo mobile y volves a desktop

import React, { useState, useEffect } from 'react';

useEffect(() => {
function handleResize() {
if (window.innerWidth > 768) {
setClicked(false);
}
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

[guillermofernandez]

Para los que queremos aprender mas de React y estamos iniciando nos sirve muchísimo. Ahora a intentar ajustarlo al código que ya he generado en mi proyecto de React.
Muchas gracias Joaquín

[matiassomoza]

Muuuyy buenoooo!! Al fin encontré alguien que la tiene clara con con React y con CSS. Segui subiendo videos porfa, me doy cuenta que muchos que estamos aprendiendo React, de estilos no saben practicamente nada Y acá tenés diseño, todo. Genial. Habrá posibilidad de que armes videos de React utilizando más Hooks, Formularios Controlados, Algún request a una Api para desplegar contenido, que en lugar de utilizar las etiquetas anchor para los links uses React-Router? Se me ocurre que este Navbar que armaste puede ser el comienzo de una App, e ir incluyendo esos temas que se piden un montón y no abundan las explicaciones claras como la tuya, muchisimo menos en español. Ya lo estuve compartiendo en grupos de estudiantes de Desarrollo Web. Vos acá utilizaste esta librería styled-components; usas css modules? Conozco esa manera de dar estilos también; y React Icons para los iconos ponele. Después, como normalizas el CSS para que no haya conflicto entre los distintos Browser? Conozco Normalize CSS, , pero hay otras formas. Muy buen uso de la propiedad position! A mi se rompían las páginas con el absolute y el relative. Y le metiste Flexbox, transitions, z-index, el juego entre los valores inline y block de la propiedad display... muy completo, en veinte minutos. Voy a estar atento a tus videos sobre el la librería React. Si sabes algo de Redux también sería genial. Y ya abusando jaaj, Node.js con Express, PostgreSQL y Sequelize para el Back. Tanto por aprender.

Excelente tu aporte Joaquien, gracias!!!!

[laraalbornoz]

Estoy facinada con este tutorial, me vino perfecto para mi porfolio, muchas gracias!!

[sisisisisisisis]

La verdad que explicas re piola Joaquin. Muchas gracias por compartir conocimiento ☺☺☺☺

[angelleninmorales]

Cual extension de VSC te permite ver autocompletar las caracteristicas de lo que vas colocando para cada componente debajo de const NavContainer= styled.nav`

[Chillguy]

justo estoy haciendo mi portafolio y me diste una gran idea gracias!

[NANAPATY]

Excelente tutorial muy bien explicado, mil gracias, ya lo apliqué en mi nuevo proyecto. Excelente diseño.... saludos desde Colombia😉😊

[David-repetto]

Gracias Joaquín! Me ayudaste muchisimo!

[rafaelirigoyen]

Hola muy bueno el video!! sabes que tengo un problema con el icon de hamburguesa cuando le vuelvo a dar click no vuelve a su lugar original queda torcida, porque sera eso? copie el css tal cual

[nahuelalejandropedemonte]

buenísimo el tuto, gracias por compartir!

[codingjhames]

Ibamos hasta la parte del BgDiv y se me rompió todo jajaja, hasta aquí dejo este tutorial.

[darkantho]

Una pregunts en el momento que se presione los links se abre la barra como se bloquea eso en la pantalla completa

[francinakb]

en la constante de styled.nav por que utilizas esa tilde?

[ismaellunaatienza]

Con el rfce que escribes al principio de los .jsx para autocompletar el fichero, me salen otros autocompletados totalmente diferentes. Sabrías decirme eso a qué es debido y como solucionarlo

[carlosmalissia]

Hola amigo...excelente tu video...ahora bien me podrias ayudar a que el nav no se superponga con el contenido cuando hay contenido ...o como hacer que el contenido se mueva abajo del nav....

[federicosabatini]

Muy bueno el video ! te consulto si cree componentes react con bootstrap que tienen alerts y tables como logro que sean responsive ?

[mjinse]

Excelente!!!me sirvió bastante, gracias!

[finanzas]

En la primera ya no me funciona el Styles.nav' me marca error y lo importa mal se rompe todo

[cuervofran]

Excelente, gracias! Que siga creciendo tu canal