primary-menu.html

<dom-module id="primary-menu">
  <template>
    <style>
        :host .main-menu:not(.--jsfied) {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        :host .main-menu .hidden {
            display: none;
        }
        :host .more.open .caret {
            transform: rotate(180deg);
        }
        :host .navbar-nav ::content a {
            line-height: 20px;
            position: relative;
            display: block;
            color: #909090;
        }
        :host .navbar-nav .active ::content a,
        :host .navbar-nav ::content a:hover,
        :host .navbar-nav ::content a:focus,
        :host .navbar-nav .more .dropdown-menu li.active ::content a,
        :host .navbar-nav .more .dropdown-menu li ::content a:hover,
        :host .navbar-nav .more .dropdown-menu li ::content a:focus{
            color: #041e42;
        }
        :host .navbar-nav {
            margin-bottom: 0;
        }
        :host .more-dropdown {
            z-index: 11;
        }
        :host .more-trigger  {
            cursor: pointer;
        }
        :host .navbar-nav > .subnav.dropdown.open {
            position: static;
        }
        :host .navbar-nav > .subnav.dropdown.open .dropdown-menu {
            width: 100%;
            left: 0;
            right: 0;
            top: 100%;
            background-color: #f5f5f5;
            min-height: 0;
            border-bottom: 1px solid #d3d3d3;
            padding: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            z-index: 10;
        }
        :host .subnav .dropdown-menu .caption {
            font-family: "Scania Sans Bold";
            color: #041e42;
            letter-spacing: .03rem;
            text-transform: uppercase;
            margin-left: 15px;
            margin-right: 15px;
            padding-right: 30px;
            display: inline-block;
            border-right: 1px solid #e2e2e2;
            /*vertical-align: text-top;*/
        }

        :host .navbar-nav .subnav .dropdown-menu li ::content a:first-child:before {
            padding-right: 0;
        }
        :host .navbar-nav > li > a.more-trigger:before, :host .navbar-nav > li + li > ::content a:before{
            border-left: 1px solid #e2e2e2;
            padding: 0 15px;
        }

        :host .navbar-nav .dropdown-menu li ::content a {
            padding: 7px 2px;
            color: #555;
            text-transform: capitalize;
            font-weight: normal;
        }
        :host .navbar-nav .more .dropdown-menu li ::content a{
            text-transform: uppercase;
            font-weight: 700;
            color: #909090;
        }
        :host .navbar-nav .subnav .dropdown-menu li ::content a:hover, :host .navbar-nav .subnav .dropdown-menu li ::content a:focus,
        :host .navbar-nav .subnav .dropdown-menu li.active, :host .navbar-nav .subnav .dropdown-menu li ::content a:visited {
            border-bottom: 2px solid #d6001c;
        }
        :host .navbar-nav .subnav .dropdown-menu li.active ::content a:hover,
        :host .navbar-nav .subnav .dropdown-menu li.active ::content a:focus,
        :host .navbar-nav .subnav .dropdown-menu li.active ::content a:visited {
            border-bottom: none;
        }
        :host .navbar-nav .dropdown-menu li ::content a:hover, :host .navbar-nav .dropdown-menu li ::content a:focus {
            color: #041e42;
        }
        :host .navbar-nav .dropdown-menu li a:before {
            padding-right: 0;
            padding-left: 0;
        }
        :host .navbar-nav .subnav .dropdown-menu li ::content a:before, :host .navbar-nav .subnav .dropdown-menu li ::content a:after {
            content: "";
            padding: 0 10px;
        }
        :host .navbar-nav .dropdown-menu li ::content a:before {
            content: "";
            padding: 15px;
        }
    </style>

     <ul class="nav navbar-nav main-menu visible-lg visible-md">
         <template is="dom-repeat" items="{{items}}">
             <li class$="main-menu-item {{conditionalClass('active', item, 'active')}}" >
              <ks-nav-item href="{{item.href}}" title="{{item.title}}" target="{{item.target}}" id="{{item.id}}"
                           index$="[[index]]" icon-position="right" on-click="onToggleSubmenu">
                  <template is="dom-if" if="{{subItem.badge}}">
                      <span class$="{{subItem.classes}}">[[subItem.badge]]</span>
                  </template>
              </ks-nav-item>
            </li>
          </template>
        <li class="dropdown more">
              <a class="dropdown-toggle more-trigger dropdown-trigger" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  {{moreText}}
                  <span class="caret"></span>
              </a>
                <ul class="dropdown-menu more-dropdown">
                   <template is="dom-repeat" items="{{items}}">
                         <li class$="{{conditionalClass('active', item, 'active')}}">
                              <ks-nav-item href="[[item.href]]" title="[[item.title]]"  index$="[[index]]"
                                           target="[[item.target]]" id="{{item.id}}" on-click="onDropdownItemActive">
                                    <template is="dom-if" if="{{subItem.badge}}">
                                        <span class$="{{subItem.classes}}">[[subItem.badge]]</span>
                                    </template>
                              </ks-nav-item>
                             <!--<a href="{{item.href}}" target="{{conditionalAttr(item.target)}}" on-click="onDropdownItemActive">{{item.title}}</a>-->
                        </li>
                  </template>
              </ul>
        </li>
    </ul>
    <div class="nav navbar-nav visible-lg visible-md">
          <template is="dom-repeat" items="{{items}}" as="primary" index-as="primary-index">
                <div class="dropdown subnav" id="[[primary.id]]-[[primary-index]]">
                    <ul class="dropdown-menu">
                        <template is="dom-if" if="[[hasSubmenu(primary)]]">
                            <li class="caption">[[primary.title]]</li>
                        </template>

                        <template is="dom-repeat" items="{{primary.items}}" as="subItem">
                             <li class$="{{conditionalClass('active', subItem, 'active')}}">
                                <ks-nav-item href="[[subItem.href]]" title="[[subItem.title]]" target="[[subItem.target]]">
                                      <template is="dom-if" if="{{subItem.badge}}">
                                          <span class$="{{subItem.classes}}">[[subItem.badge]]</span>
                                      </template>
                                </ks-nav-item>
                             </li>
                        </template>
                    </ul>
                </div>
          </template>
    </div>
  </template>

  <script>
  Polymer({
      is: 'primary-menu',
      properties: {
          moreText: {
              type: String,
              value:'More'
          }
      },
      behaviors: [CUIBehaviors.MenuBehavior, CUIBehaviors.GlobalBehavior],

      attached: function () {
          this.init = false;
          window.addEventListener('resize', this.doAdapt.bind(this));
          window.addEventListener('scroll', this.doAdapt.bind(this));
          this.identification.push({id: 'primary-menu'});
          this.doAdapt();
      },
      detached: function () {
          window.removeEventListener('resize', this.doAdapt.bind(this));
          window.removeEventListener('scroll', this.doAdapt.bind(this));
      },
      attributeChanged: function (name, type) {
          Polymer.RenderStatus.afterNextRender(this, function () {
            //   if(!this.init){
                this._initMenu('.primary-menu.active a');
            //       this.init = true;
            //   }
              this.doAdapt();
              var moreActiveItems = this.querySelector('.more-dropdown li.active:not(.hidden)');
              //Set more menu to be active
              if(moreActiveItems){
                  this._setMoreMenuToActive();
              }

          }.bind(this));
      },
      onToggleSubmenu: function(event){
          this.toggle(event.target.parentNode, true);
      },
      onDropdownItemActive: function(event){
          this.toggle(event.target.parentNode, true);
          this._setMoreMenuToActive();
      },
      _setMoreMenuToActive: function(){
          this.safeCall(this.querySelector('.more-trigger').parentNode.classList, 'add', 'active');
      },
      doAdapt: function () {
          if(this.isDevice){
              //We are on a device
              return;
          }
          var moreDropdown = this.querySelector('.more-dropdown'),
                  mainMenu = this.querySelector('.main-menu'),
                  mainMenuItems = this.querySelectorAll('.main-menu-item'),
                  moreItems = moreDropdown.querySelectorAll('li'),
                  allItems = mainMenu.querySelectorAll('li'),
                  moreLi = this.querySelector('.more'),
                  secondaryMenu = this.parentNode.querySelector('secondary-menu');

          if(!secondaryMenu){
              return;
          }
          mainMenu.classList.add('--jsfied');

          // reveal all items for the calculation
          allItems.forEach(function(item){
              item.classList.remove('hidden')
          });
          // hide items that won't fit in the Primary
          var hiddenItems = [],
                  deviceWidth = window.innerWidth,
                  totalMenuWidth = deviceWidth - secondaryMenu.offsetWidth,
                  dynamicWidth = moreLi.offsetWidth + 100;


          mainMenuItems.forEach(function(item, i) {
              if(totalMenuWidth > dynamicWidth + item.offsetWidth) {
                  dynamicWidth += item.offsetWidth
              } else {
                  item.classList.add('hidden');
                  hiddenItems.push(i)
              }
          });
          // toggle the visibility of More button and items in Secondary
          if(!hiddenItems.length) {
              moreLi.classList.add('hidden');
          }
          else {
              moreItems.forEach(function(item, i){
                  if(!hiddenItems.includes(i)) {
                      item.classList.add('hidden')
                  }
              })
          }
      },
      hasSubmenu: function (menuItem){
          return (menuItem.items && menuItem.items.length > 0);
      }
  });
  </script>

</dom-module>