Продолжая нашу серию статей о создании приложения для электронной коммерции с использованием ReactJS, мы сейчас заполним код из последнего поста. Вот наш небольшой список дел на сегодня:

  1. Добавьте две ссылки: одну в корзину и вторую для входа;
  2. Добавьте боковую панель, чтобы она работала как меню.

Давайте начнем создавать заголовок, чтобы вставить наши ссылки и боковую панель. Мы будем использовать код ASCII для гамбургер-меню, которое находится ☰ в нашем заголовке, оно будет выглядеть так:

<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>

Идеальный! Это наш заголовок с нужными нам ссылками и кнопкой, чтобы скрыть и показать нашу боковую панель.
Теперь давайте перейдем к созданию боковой панели и заполнению ее ссылками на нужные нам категории. Пока не беспокойтесь об использовании тега ‹a›, мы изменим его позже.

<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>

Итак, это наше боковое меню. Мы хотим создать функцию, которая будет скрывать и показывать боковую панель, когда пользователь нажимает на нее, для этого просто используйте OnClick={}внутри кнопки прямо под кнопкой >‹div className="brand"›и в ‹button className="sidebar-close-btn"›x‹/button›.

Код нам нужен вот такой:

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

Это стили для вашей навигационной панели, выбирайте цвета по своему усмотрению. Теперь перейдите в файл styles.css, чтобы задать стиль главной странице.

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

Мы выполнили наши цели на сегодня! В следующий раз, когда нам нужно заполнить область основного контента некоторыми продуктами, это будет включать изображение, бренд, цену и название.