1. Add sidebar to work as a menu.
<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;}

--

--

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