Как менять класс другого элемента следя за display через css стили основного элемента?

Question

[TheSnegok]

Код:

let burger = document.body.querySelector('#burger'),
        menu = document.body.querySelector('.promo__list ul'),
        cssStyles = getComputedStyle(burger),
        burgerDisplay = cssStyles.display;

    const openMenu = () => {
        burgerDisplay.addEventListener('change', () => {
            burgerDisplay == 'none' ? menu.style.opacity = 1 : 
                burger.addEventListener('click', () => {
                    burger.classList.toggle('open');
                    burger.classList == 'open' ? menu.style.opacity = 1 : menu.style.opacity = 0; 
                })
            }
        )
    }
    openMenu();

burger - это то на что нужно нажимать чтобы показало меню;
menu - это меню у которого меняется opacity;
cssStyles - это копия стилей css элемента burger;
burgerDisplay - это само свойство display которое берётся из css стилей.
Суть функции в том что когда нажимаешь на бургер то он меняет класс себе для анимации и показывает меню, но если скрыть меню и увеличить экран чтобы спрятался бургер то меню так и остаётся скрытым, сам вопрос в том можно ли следить за этим свойством display взятым из css и по возможности показывать меню когда у бургера display: none?

Comments

[Konfy]

Если я правильно понял, то проще следить за увеличением экрана (window resize event)

[Konfy]

Ну или css media queries. Не вчитывался в проблему

Answer 1

[Сергей delphinpro]

Используйте классы для управления состоянием. И классы меняйте кодом.

.menu {
  opacity: 0; /* по умолчанию скрыто */
}
.menu-opened {
  opacity: 1; /* при добавлении класса - открыто */
}

@media (min-width: 992px) {
  .menu {
    opacity: 1; /* на больших экранах – всегда открыто */
  }
}

//...
burger.classList.toggle('open');
burger.classList == 'open'
  ? menu.classList.add('menu-opened')
  : menu.classList.remove('menu-opened');

Кстати, что это такое: burger.classList == 'open'?
Проверку так делают:
burger.classList.contains('open');