Можно ли проще сделать боковое меню, чем данный код?

Question

[Имя Фамилия]

Особенности меню:
- при широком экране больше 860 пикселей меню боковое открыто
- можно его скрыть нажав на значок, меняется class
- при уменьшении экрана меню скрывается когда меньше 860 пикселей через css media
- при у уменьшенном экране при открытии меню скрывается скролбар


сильно ли тяжелый такой код или нужно попроще делать

function menuuu(){
if(document.documentElement.clientWidth < 860) {
document.getElementsByTagName("body")[0].classList.toggle('lock-scrollbar');
if (document.getElementById("wk").classList.contains('wk')){
document.getElementById("wk").classList.toggle('wk');
document.getElementById("wk").classList.add('otkrit');
} else if(document.getElementById("wk").classList.contains('zakrit')){
document.getElementById("wk").classList.toggle('zakrit');
document.getElementById("wk").classList.add('otkrit');
}else {
document.getElementById("wk").classList.toggle('otkrit');
document.getElementById("wk").classList.add('wk');
}
} else {
if(document.getElementsByTagName("body")[0].classList.contains('lock-scrollbar')){
document.getElementsByTagName("body")[0].classList.remove('lock-scrollbar');
}
if (document.getElementById("wk").classList.contains('wk')){
document.getElementById("wk").classList.toggle('wk');
document.getElementById("wk").classList.add('zakrit');
} else if(document.getElementById("wk").classList.contains('otkrit')){
document.getElementById("wk").classList.toggle('otkrit');
document.getElementById("wk").classList.add('zakrit');
}else{
document.getElementById("wk").classList.remove('zakrit');
document.getElementById("wk").classList.add('wk');
}
}
}

Comments

[Сергей Сергей]

const wk = document.getElementById("wk")

[Антон Литвиненко]

вот это вот 'otkrit' - 'zakrit' - это плохой тон, старайтесь избавляться. есть нормальные слова open, close

Answer 1

[Dennis]

Во первых, используй переменные, во вторых напиши один раз функцию открытия и вызывай ее с нужными параметрами при нужном разрешении. Keep Calm and Don't Repeat Youself!!!