window.resize 时如何从菜单中删除闪烁或如何适应动态菜单？

var headerWrapper = document.querySelector('.header-wrapper'),
        headerContainer = document.querySelector('.header .container'),
        logo = document.querySelector('.logo'),
        nav = document.querySelector('nav'),
        navWidth = document.querySelector('nav').offsetWidth,
        headerBtn = document.querySelector('.header .btn'),
        gamburger = document.querySelector('.gamburger-wrapper');

    
    window.onload = mobileMenu; // Сравниваем ширину при загрузке
    window.addEventListener('resize', mobileMenu); // Сравниваем ширину при загрузке

    
    function mobileMenu() {
        // Если ширина контейнера меньше, чем сумма ширин блоков
        if (headerContainer.offsetWidth < (logo.offsetWidth + navWidth + headerBtn.offsetWidth)) {
            
            // true - активируем мобильный вид
            headerWrapper.classList.add('mobile')
            
            // false - убираем мобильный вид
        } else {
            headerWrapper.classList.remove('mobile')
        }
    }

    
    // Нажатие на гамбургер меню
    gamburger.addEventListener('click', () => {
        nav.classList.toggle('active')
    })

*,
    :after,
    :before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    :focus {
        outline: none
    }

    .headerWrapper {
        padding: 0;
        margin: 0;
        background-color: #f2f2f2
    }

    p {
        color: #000
    }

    ul {
        list-style: none
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .btn,
    a {
        cursor: pointer
    }

    .btn {
        color: #838b93;
        padding: 5px 16px 4px;
        margin: 0;
        height: 32px;
        background-color: #fff;
    }

    .btn,
    .btn:hover {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .btn:hover {
        color: #485d67;
    }

    .container {
        height: 100%;
        max-width: 960px;
        padding: 0 15px;
        margin: 0 auto;
        position: relative
    }

    .header {
        display: block;
        width: 100%;
        height: 40px;
        padding: 0;
        margin: 0;
        position: relative;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
    }

    .header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .header .container nav {
        margin-left: auto
    }

    .header ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        width: 100%;
        color: #838b93;
        padding: 0;
        margin-right: 20px
    }

    .header ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0;
        flex: 0;
        padding: 5px 14px
    }

    .header ul li:hover {
        cursor: pointer;
        color: #485d67
    }

    .header .logo {
        display: block;
        min-width: 105px;
        font-weight: 700;
        font-size: 20px;
        color: #444
    }

    .header .logo span {}

    .mobile .btn {
        margin-right: 0
    }

    .mobile .header nav {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        background-color: #fff
    }

    .mobile .header nav ul {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);
        box-shadow: -2px 2px 4px rgba(0, 0, 0, .1)
    }

    .mobile .header nav ul li {
        display: block;
        padding: 10px;
        border-left: 2px solid transparent
    }

    .mobile .header nav ul li:hover {
        background-color: #f2f2f2;
        border-left: 2px solid #838b93
    }

    .mobile .header .active {
        display: block
    }

    .mobile .gamburger-wrapper {
        display: block;
        cursor: pointer;
        height: 30px;
        width: 30px;
        position: relative
    }

    .mobile .gamburger {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #777;
        position: absolute;
        top: 45%;
        left: 0
    }

    .mobile .gamburger:after {
        top: 7px
    }

    .mobile .gamburger:after,
    .mobile .gamburger:before {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        position: absolute;
        background-color: #777;
        left: 0
    }

    .mobile .gamburger:before {
        bottom: 7px
    }

<div class="header-wrapper">
    <div class="header">
        <div class="container">
            <div class="logo">
                <span>Лого</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Меню1</a></li>
                    <li><a href="#">Меню2</a></li>
                    <li><a href="#">Меню3</a></li>
                    <li><a href="#">Меню4</a></li>
                </ul>
            </nav>
            <button class="btn">Кнопка</button>
            <div class="gamburger-wrapper">
                <div class="gamburger"></div>
            </div>
        </div>
    </div>
</div>