* responsive-nav: add support for fixed items in ResponsiveNavHelper and update README to reflect changes.

Author: catouse

lib/responsive-nav/README.md

@@ -20,7 +20,7 @@
   <li class="item nav-item"><a><span class="text">Forum</span></a></li>
   <li class="item nav-item"><a><span class="text">Q&A</span></a></li>
     <li class="item nav-item"><input type="search" class="form-control mx-2" placeholder="Search"></li>
-  <li class="item nav-item"><a><span class="text">Feedback</span></a></li>
+  <li class="item nav-item is-rsh-fixed"><a><span class="text">Feedback</span></a></li>
   <li class="item nav-item"><button type="button" class="btn mx-2">Lucky</button></li>
   <li class="item nav-item">
     <a data-toggle="dropdown" data-items='[{"text":"Life"},{"text":"Share"},{"text":"Feed"}]'><span class="text">Blog</span><span class="caret"></span></a>

lib/responsive-nav/src/types/responsive-nav-helper-props.ts

@@ -9,6 +9,7 @@ export interface ResponsiveNavHelperProps {
     container?: Selector;
     items?: Comparator;
     ignoreItems?: Comparator;
+    fixedItems?: Comparator;
     moreDropdown?: Partial<DropdownOptions>;
     getContainerSize?: (container: HTMLElement) => number;
     getItemSize?: (item: HTMLElement) => number;

lib/responsive-nav/src/vanilla/responsive-nav-helper.ts

@@ -92,20 +92,29 @@ export class ResponsiveNavHelper extends Component<ResponsiveNavHelperProps> {
         let overflow = false;
         this._moreItems = undefined;
         this._moreElements = [];
+        const {fixedItems = '.is-rsh-fixed'} = this.options;
+        const $fixedItems = fixedItems ? $items.filter(fixedItems) : null;
+        const fixedItemSet = $fixedItems?.length ? new Set($fixedItems) : null;
+        if ($fixedItems?.length) {
+            for (const item of $fixedItems) {
+                size += this.getItemSize(item);
+            }
+        }
         for (const item of $items) {
             const $item = $(item);
-            if ($item.hasClass('rsh-more')) {
-                return;
+            if ($item.hasClass('rsh-more') || fixedItemSet?.has(item)) {
+                continue;
             }
 
             const opacity = $item.css('opacity');
             if (!overflow) {
                 $item.css({display: 'flex', opacity: 0});
                 const itemSize = this.getItemSize($item[0] as HTMLElement);
                 size += itemSize;
-                if (size > containerSize) {
-                    overflow = true;
-                }
+            }
+
+            if (size > containerSize) {
+                overflow = true;
             }
 
             if (overflow) {