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 no-gutters 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">
                <!-- only icon -->
                <button type="button" class="navbar-toggler border-0 d-none d-sm-inline-flex float-left">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                <a href="#" class="nav-link float-left" id="catalogList" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог
                        ...

CSS

.navbar {
  padding: 0;
}

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;

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

      if (widthStaticItems >= staticItemsMaxWidth) {
        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);
  };

  recountNavItems();

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