Шамил Халиков

Привет.

Нужно определиться - это блок или элемент. Согласно БЭМ методологии, имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Определение блока:
Блок - это независимый интерфейсный компонент. Он может быть простым или составным (содержать другие блоки). В HTML/CSS блоки представляются как CSS-классы, названные согласно правилам именования. Пример блока:
<div class="header">...</div>

Определение элемента:
Элемент - это составная часть блока. Элементы контекстно-зависимы: они имеют смысл только в рамках своего блока. Элемент в HTML/CSS представляется как CSS-класс, содержащий имя блока и имя элемента, разделённые двумя знаками underscore. Пример элемента:

<div class="header">
    <div class="header__bottom">...</div>
</div>

И определение модификатора для полной картины:
Модификатор - это свойство блока или элемента, задающее изменения в их внешнем виде или поведении. Модификатор в HTML/CSS представляется как CSS-класс, содержащий имя блока и имя модификатора, разделённые одним знаком underscore. Пример модификатора:

<div class="header header_christmas">...</div> <!-- Christmas edition of the header -->

Привет.

Для этих целей нужно использовать React router.
https://reactrouter.com/en/main/start/tutorial - вот здесь расписано, как это можно сделать.

Можно решить задачу через css стили.

1. У меню указать свойство position: fixed.
2. Создать класс active, который отвечает за то, что элемент видно.
3. Создать класс hidden, который отвечает за то, что элемент не видно.
В зависимости от видимости/невидимости меню в начале указываете один из классов по умолчанию, они должны менять друг друга при событии click на нужный элемент.
4. Указать классу hidden свойство left: -ширина меню в пикселях. Например: left: - 100px. Меню исчезнет влево и уйдет из основного потока страницы.
5. Указать классу active свойство left: 0. Т.е. меню возвращается на страницу.
Можно указать и right, зависит от того, с какой стороны будет находится меню.
6. Пример JS кода с логикой замены этих классов у элемента:

const button1 = document.querySelector('.sidebar__button');
const field = document.querySelector('.field');
const menu = document.querySelector('.menu');

button1.addEventListener('click', () => {
    menu.classList.replace('active' , 'hidden');
});

field.addEventListener('click', () => {
    menu.classList.replace('hidden', 'active');
});