<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>
<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>
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>
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>
.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;}
.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;}

--

--

--

Starting in programming life. Has a background in HTML, PHP, CSS and JS. Loves to share his thoughts and opinions.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

19 File Upload Libraries For Websites

Developer Stories: Meet Yusuf, React Native Developer & Computer Science Graduate

Creating a searchable movie app using React, styled-components and React Hooks

Screenshot of the app

Advanced typescript for React developers

Fireball action aka React.js training in Avast

React vs Angular

What is Angular ? Let’s Learn……

How to integrate Notion API into your web application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lucas Saladini

Lucas Saladini

Starting in programming life. Has a background in HTML, PHP, CSS and JS. Loves to share his thoughts and opinions.

More from Medium

E-Commerce App using Amazon UI and React JS

Built Cult.fit Clone using React !!

Spotify Clone using ReactJS — Part 1

Create a form using React Hook Form to POST and GET data from your MongoDB on Next.js: Part I