E-commerce web app with React JS (Part 2)

Continuing our series of building an e-commerce app using ReactJS we now will populate the code from the last post. This is our small to-do list for today:

1. Add two links: one to cart and second one for login;
2. Add sidebar to work as a menu.

Let’s start creating a header to insert our links and sidebar. We’ll use the ASCII code for the hamburger menu which is ☰ in our header, it’ll look like this:

<div className="grid-container">
<header className="header">
<div className="brand">
<button>
&#9776;
</button>
<Link to="/" className="header-links">Site Name</Link>
</div>
<div className="header-links">
<Link to="/cart">Cart</Link>
<Link to="/signin">Sign In</Link>
</div>
</header>

Perfect! That’s our header with the links we needed and the button to hide and show our sidebar.
Now let’s move for creating the sidebar and populating it with some links for the categories we need. Don’t worry using the <a> tag for now, we’ll change it later on.

<aside className="sidebar">
<h3>Categories</h3>
<button className="sidebar-close-btn">x</button>
<ul>
<li>
<a href="">Category 1</a>
</li>
<li>
<a href="">Category 2</a>
</li>
<li>
<a href="">Category 3</a>
</li>
<li>
<a href="">Category 4</a>
</li>
<li>
<a href="">Category 5</a>
</li>
<li>
<a href="">Category 6</a>
</li>
<li>
<a href="">Category 7</a>
</li>
<li>
<a href="">Category 8</a>
</li>
</ul>
</aside>

So this is our sidebar menu. We want to create a function that will hide and show the sidebar when the user clicks on it, for this just use OnClick={} inside the button right below the <div className=”brand”> and in <button className=”sidebar-close-btn”>x</button>.

The code we need is this:

const openMenu = () => {
document.querySelector(“.sidebar”).classList.add(“open”);
}
const closeMenu = () => {
document.querySelector(“.sidebar”).classList.remove(“open”);
}
<header className=”header”>
<div className=”brand”>
<button onClick={openMenu}>
&#9776;
</button>
<Link to=”/” className=”header-links”>Farm To Fork</Link>
</div>
<div className=”header-links”>
<a href=”cart”>Cart</a>
<a href=”signin”>Sign In</a>
</div>
</header>

Now we have to add this to our code and make it work on click events

function App() => {
const openMenu = () => {
document.querySelector(“.sidebar”).classList.add(“open”);
}
const closeMenu = () => {
document.querySelector(“.sidebar”).classList.remove(“open”);
}
/** Code above **/
<button onClick={openMenu}>
&#9776;
</button>
/** Code below **/
<aside className="sidebar">
<h3>Categories</h3>
<button className="sidebar-close-btn" onClick={closeMenu}>x</button>

Great! Our sidebar is complete and with a proper click event that will handle the function to hide and show it.
In the sidebar.css file will go our styles for the sidebar menu, you can change it to meet your needs but basically will be like this:

.brand button {
font-size: 3rem;
padding: 0.5rem;
background: none;
border: none;
color: insert your color here;
cursor: pointer;
}
.sidebar {
position: fixed;
transition: all 0.5s ease;
transform: translateX(-30rem);
width: 30rem;
background: insert your color here;
height: 100%;
}
.sidebar h3 {
color: insert your color here;
}
.sidebar ul li {
list-style: none;
text-align: left;
padding-top: 0.5rem;
}
.sidebar ul li a {
color: insert your color here;
text-decoration: none;
}
.sidebar ul li a:hover {
color: insert your color here;
text-decoration: none;
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-close-btn {
border-radius: 50%;
border: none;
background: insert your color here;
color: insert your color here;
width: 3rem;
height: 3rem;
padding: 0.5rem;
font-size: 2rem;
padding-top: 0;
cursor: pointer;
position: absolute;
right: 0.5rem;
top: 1.5rem;
}

That’s the styles for your navbar, choose the colors as you want. Now move to the styles.css to style the main page.

.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 5rem;
height: 100%;
}
.header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
background: insert your color here;
color: insert your color here;
padding: 1.3rem;
}
.brand a {
color: insert your color here;
font-size: 2.5rem;
font-weight: bold;
text-decoration: none;
}
.header-links:hover {
color: insert your color here;
transition: all 0.5s ease;
}
.header-links a {
color: insert your color here;
text-decoration: none;
padding-right: 1rem;
}
.header-links a:hover {
color: insert your color here;
transition: all 0.5s ease;
}

We finished our goals for today! Next time we need to populate the main content area with some products, this will include an image, brand, price and title.