recount navbar items

by Alexander Sevirinov

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="bottom-line">
        <div class="container-fluid">
            <div class="row align-items-center">
                <!-- BEGIN MAIN NAV -->
                <div class="col-sm-8 col-md-9">
                    <nav class="navbar navbar-light navbar-expand-sm">
                        <div class="navbar-collapse offcanvas-collapse float-sm-left">
                            <div class="d-flex flex-row justify-content-between align-items-center py-2 d-sm-none">
                                <div>
                                    <small class="text-muted text-uppercase">г.Москва</small>
                                    <br>
                                    <small class="text-primary text-uppercase">Первый официальный маркет
                                        <br> электротранспорта
                                    </small>
                                </div>
                                <!-- close nav button -->
                                <div>
                                    <button type="button"
                                            class="navbar-close navbar-toggler text-primary p-0 border-0"
                                            data-toggle="offcanvas">
                                        <i class="icon icon-close"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- BEGIN NAV -->
                            <ul class="navbar-nav mr-auto">
                                <!-- catalog list -->
                                <li class="nav-item nav-item-main dropdown position-relative mr-sm-2">
                                 ...

JavaScript

$(()=>{
let recountNavItems = () => {
    let navCatalog = $('.navbar-nav');
    let mainMenu = navCatalog.find('.nav-item-main');
    let staticItems = navCatalog.find('.nav-item-static');
    let moreItems = navCatalog.find('.nav-item-more');
    let staticItemsMore = moreItems.find('.dropdown-item');
    let rightInfoBox = $('.bottom-line').find('.info-text');
    let hiddenClass = 'd-none';

    let staticItemsMaxWidth = navCatalog.outerWidth(true) -
        mainMenu.outerWidth(true) -
        moreItems.outerWidth(true) - rightInfoBox.outerHeight(true) - 20;
    let widthStaticItems = 0;
    let hiddenIndex = false;
    let hasMore = true;

    console.log(staticItemsMaxWidth);

    $.each(staticItems, (i, item) => {
      $(item).removeClass(hiddenClass);
      widthStaticItems += $(item).outerWidth();

      if (widthStaticItems >= staticItemsMaxWidth && window.matchMedia('(min-width: 768px)').matches) {
        if (hiddenIndex === false) hiddenIndex = i;
        $(item).addClass(hiddenClass);
      }
    });

    $.each(staticItemsMore, (i, item) => {
      hasMore = $(item).not('.' + hiddenClass).length > 0;

      ((hiddenIndex === false) || (i < hiddenIndex)) ?
          $(item).addClass(hiddenClass) :
          $(item).removeClass(hiddenClass);
    });

    hasMore ?
        $(moreItems).removeClass(hiddenClass) :
        $(moreItems).addClass(hiddenClass);
  };

$(window).load(() => recountNavItems());

$(window).resize(() => recountNavItems());
});