Можно решить задачу через 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');
});
