Primero, seleccionemos el html del proyecto anterior y construyamos un componente.
// Header.jsx
import React from 'react';
import '../styles/Header.scss'
const Header = () => {
return (
<nav>
<img src="./icons/icon_menu.svg" alt="menu" className="menu" />
<div className="navbar-left">
<img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />
<ul>
<li>
<a href="/">All</a>
</li>
<li>
<a href="/">Clothes</a>
</li>
<li>
<a href="/">Electronics</a>
</li>
<li>
<a href="/">Furnitures</a>
</li>
<li>
<a href="/">Toys</a>
</li>
<li>
<a href="/">Others</a>
</li>
</ul>
</div>
<div className="navbar-right">
<ul>
<li className="navbar-email">[email protected]</li>
<li className="navbar-shopping-cart">
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart" />
<div>2</div>
</li>
</ul>
</div>
</nav>
);
}
export default Header;
Recordemos que debemos cambiar class del html por className, para evitar problemas.
Segundo, traigamos el css, y creamos el archivo scss.
// Header.scss
nav {
display: flex;
justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid var(--very-light-pink);
}
.menu {
display: none;
}
.logo {
width: 100px;
}
.navbar-left ul,
.navbar-right ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
height: 60px;
}
.navbar-left {
display: flex;
}
.navbar-left ul {
margin-left: 12px;
}
.navbar-left ul li a,
.navbar-right ul li a {
text-decoration: none;
color: var(--very-light-pink);
border: 1px solid var(--white);
padding: 8px;
border-radius: 8px;
}
.navbar-left ul li a:hover,
.navbar-right ul li a:hover {
border: 1px solid var(--hospital-green);
color: var(--hospital-green);
}
.navbar-email {
color: var(--very-light-pink);
font-size: var(--sm);
margin-right: 12px;
}
.navbar-shopping-cart {
position: relative;
}
.navbar-shopping-cart div {
width: 16px;
height: 16px;
background-color: var(--hospital-green);
border-radius: 50%;
font-size: var(--sm);
font-weight: bold;
position: absolute;
top: -6px;
right: -3px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 640px) {
.menu {
display: block;
}
.navbar-left ul {
display: none;
}
.navbar-email {
display: none;
}
}
Por último, incorporemos dicho header en el home del proyecto.
// Home.jsx
import React from 'react';
import Header from '../components/Header';
const Home = () => {
return (
<Header />
);
}
export default Home;
Y listo, ya tenemos nuestro header en la página Home.
Reto: analizar todos los componentes, containers y páginas del proyecto para terminar toda la estructura final. Es importante que aprendamos a diferenciar cada uno, pues nuestro objetivo siempre será crear el código más reutlizable y fácil de mantener.