first commit

bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.css

@@ -0,0 +1,38 @@
+
+.wrapper-nav {
+    position:relative;
+    margin:0 auto;
+    overflow:hidden;
+	padding:5px;
+  	height:50px;
+}
+
+.list {
+    position:absolute;
+    left:0px;
+    top:0px;
+  	min-width:3500px;
+    margin-top:0px;
+}
+
+.list li{
+	display:table-cell;
+    position:relative;
+    text-align:center;
+    cursor:grab;
+    cursor:-webkit-grab;
+    color:#efefef;
+    vertical-align:middle;
+}
+
+.scroller {
+  text-align:center;
+  cursor:pointer;
+  display:none;
+  padding:7px;
+  white-space:no-wrap;
+  vertical-align:middle;
+  background-color:#fff;
+}
+
+.pointer {cursor: pointer;}

bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.min.css

@@ -0,0 +1 @@
+.wrapper-nav{position:relative;margin:0 auto;overflow:hidden;padding:5px;height:50px}.list{position:absolute;left:0;top:0;min-width:3500px;margin-top:0}.list li{display:table-cell;position:relative;text-align:center;cursor:grab;cursor:-webkit-grab;color:#efefef;vertical-align:middle}.scroller{text-align:center;cursor:pointer;display:none;padding:7px;white-space:no-wrap;vertical-align:middle;background-color:#fff}.pointer{cursor:pointer}

bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.js

@@ -0,0 +1,137 @@
+//let move = require('move');
+
+const scrollBarWidths = 40;
+const wrapper = document.getElementsByClassName("wrapper-nav")[0];
+const navLink = document.getElementsByClassName("nav-item nav-link");
+const lastNavLink = navLink[navLink.length - 1];
+
+const scrollerRight = document.getElementsByClassName("scroller-right")[0];
+const scrollerLeft = document.getElementsByClassName("scroller-left")[0];
+
+const list = document.querySelectorAll(".list");
+
+let btnTriggered = false;
+
+let widthOfList = function() {
+    let itemsWidth = 0;
+  
+    const listLinks = document.querySelectorAll(".list a");
+  
+    listLinks.forEach((el) => { 
+      let itemWidth = getOuterWidth(el);
+      itemsWidth += itemWidth;
+    });
+  
+    return itemsWidth;
+};
+  
+let widthOfHidden = function(w) {
+    const wrapperh = document.getElementsByClassName("wrapper-nav")[0];
+
+    w = (!w) ? 0 : w;
+
+    oW = getOuterWidth(wrapperh) - w;
+
+    let ww = parseFloat((0 - oW).toFixed(3));
+
+    let hw = (oW - widthOfList() - getLeftPosi()) - scrollBarWidths;
+
+    let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink)) - w;
+    
+    if (ww > hw) {
+        //return ww;
+        return (rp > ww ? rp : ww);
+    }
+    else {
+        //return hw;
+        return (rp > hw ? rp : hw);
+    }
+};
+
+let getLeftPosi = function() {
+    let ww = 0 - getOuterWidth(wrapper);
+    let lp = getOuterLeft(list[0]);
+
+    if (ww > lp) {
+        return ww;
+    }
+    else {
+        return lp;
+    }
+};
+
+let reAdjust = function() {
+  let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink));
+
+  if (getOuterWidth(wrapper) < widthOfList() && (rp < 0)) {
+    scrollerRight.style.cssText = 'display: flex';
+  }
+  else {
+    scrollerRight.style.display = 'none';
+  }
+
+  if (getLeftPosi() < 0) {
+    scrollerLeft.style.cssText = 'display: flex';
+  }
+  else {
+    scrollerLeft.style.display = 'none';
+  }
+
+  btnTriggered = false;
+}
+
+window.addEventListener('resize', function(event) {
+    reAdjust();
+}, true);
+
+scrollerRight.addEventListener("click", function() {
+    if (btnTriggered) return;
+
+    btnTriggered = true;
+
+    fade(scrollerLeft);
+    unfade(scrollerRight);
+
+    let wR = getOuterWidth(scrollerRight);
+
+    move(document.querySelectorAll(".list")[0]).add("left", +widthOfHidden(wR), 200).end().then(x=> {
+        reAdjust();
+    });
+});
+
+scrollerLeft.addEventListener("click", function() {
+    if (btnTriggered) return;
+
+    btnTriggered = true;
+
+    fade(scrollerRight);
+    unfade(scrollerLeft);
+
+    let wL = getOuterWidth(scrollerLeft);
+
+    move(document.querySelectorAll(".list")[0]).add("left", -getLeftPosi() + wL, 200).end().then(()=> {
+        reAdjust();
+    });
+});
+
+let getOuterLeft = function(elem) {
+    return elem.getBoundingClientRect().left;
+}
+
+let getOuterWidth = function(elem) {
+    return parseFloat(window.getComputedStyle(elem).width);
+}
+
+function fade(elem) {
+    elem.style.display = "none";
+    elem.style.transition="opacity 0.6s";
+    elem.style.opacity=0;
+}
+
+function unfade(elem) {
+    elem.style.display = "block";
+    elem.style.transition="opacity 0.6s";
+    elem.style.opacity=1;
+}
+
+reAdjust();

bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.min.js

@@ -0,0 +1 @@
+const scrollBarWidths=40,wrapper=document.getElementsByClassName("wrapper-nav")[0],navLink=document.getElementsByClassName("nav-item nav-link"),lastNavLink=navLink[navLink.length-1],scrollerRight=document.getElementsByClassName("scroller-right")[0],scrollerLeft=document.getElementsByClassName("scroller-left")[0],list=document.querySelectorAll(".list");let btnTriggered=!1,widthOfList=function(){let e=0;return document.querySelectorAll(".list a").forEach(t=>{let l=getOuterWidth(t);e+=l}),e},widthOfHidden=function(e){const t=document.getElementsByClassName("wrapper-nav")[0];e=e||0,oW=getOuterWidth(t)-e;let l=parseFloat((0-oW).toFixed(3)),r=oW-widthOfList()-getLeftPosi()-40,n=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink))-e;return l>r?n>l?n:l:n>r?n:r},getLeftPosi=function(){let e=0-getOuterWidth(wrapper),t=getOuterLeft(list[0]);return e>t?e:t},reAdjust=function(){let e=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink));getOuterWidth(wrapper)<widthOfList()&&e<0?scrollerRight.style.cssText="display: flex":scrollerRight.style.display="none",getLeftPosi()<0?scrollerLeft.style.cssText="display: flex":scrollerLeft.style.display="none",btnTriggered=!1};window.addEventListener("resize",function(e){reAdjust()},!0),scrollerRight.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerLeft),unfade(scrollerRight);let e=getOuterWidth(scrollerRight);move(document.querySelectorAll(".list")[0]).add("left",+widthOfHidden(e),200).end().then(e=>{reAdjust()})}),scrollerLeft.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerRight),unfade(scrollerLeft);let e=getOuterWidth(scrollerLeft);move(document.querySelectorAll(".list")[0]).add("left",-getLeftPosi()+e,200).end().then(()=>{reAdjust()})});let getOuterLeft=function(e){return e.getBoundingClientRect().left},getOuterWidth=function(e){return parseFloat(window.getComputedStyle(e).width)};function fade(e){e.style.display="none",e.style.transition="opacity 0.6s",e.style.opacity=0}function unfade(e){e.style.display="block",e.style.transition="opacity 0.6s",e.style.opacity=1}reAdjust();