Как корректно повесить ресайз на js?

Question

[makepuff]

На сайте есть скрипт js для мобильного меню, работает ок, если обновлять страницу.

Добавлял ресайз, вроде работало, но начинало открываться - закрываться (автоматически) по одному клику, меню на мобильной версии.

if (window.matchMedia("(max-width: 767px)").matches) {
            $('.nav-about__list').replaceWith('<div class="btn-mob"><div class="mob-menu-icon"><span></span></div></div><div class="mob-menu"><ul class="nav-about__list"> <li class="nav-about__item"> <a href="#" class="nav-about__item__link">О проекте</a> </li> <li class="nav-about__item"> <a href="#" class="nav-about__item__link">Контакты</a> </li> <li class="nav-about__item"> <a href="#" class="nav-about__item__link">Команда</a> </li> </ul></div>')
            $('.btn-mob').click(function() {
                $('.mob-menu').animate({
                    width: 'toggle'
                }, 350);
                $('.btn-mob').toggleClass('close')
                $('.mob-menu-icon').toggleClass('open')
            })
        }
        $(window).scroll(function() {
            $('.header').toggleClass('fixed', $(this).scrollTop() > 0);
        });

Как это правильно сделать?

Comments

[Andrew]

на html тяжело это сделать...
Код будет полезен в таком случае и настоятельно рекомендую делать на css, вместо, непонятно зачем, реплэйсов.

[makepuff]

Andrew, чистый html+css без обращения к js?

[makepuff]

И получается лучше писать display none в зависимости от разрешения чем использовать js?

[Andrew]

makepuff, открою вам секрет, анимация в jQ тоже осннована на css.
Можно через keyframes, transition менять положение обьекта/прозрачность, при наведении, например.
Медиа-запросы дают хороший эффект, они стабильно отработают при смене разрешения, можете учесть высоту/ширину, эффект раскрытия и т.п