Toolbar

‍

 fetch("https://api.jumpto365.com/table/nets.eu/ies-customer-experience").then(

   response => {

     response.json().then(data => {

       const id = "toolbar";

       var ref = document.getElementsByTagName("body")[0];

       var style = document.createElement("style");

       style.innerHTML =

         ".toolbarButton:hover  {background-color:#777777} .toolbarButton  {padding:10px;padding-left:20px;padding-right:20px} "

       + ".toolbarButton.active {background-color:#999999;color:#ffffff}"

        + ".toolbarText  {overflow:hidden;text-align:center;text-decoration:none;color:#444444} "

       ref.parentNode.insertBefore(style, ref);

       var div = document.createElement("div");

       var html = "";

       div.id = id;

       div.style.position = "fixed";

       div.style.textAlign = "center"

       div.style.right = "0";

       div.style.top = "200px";

       div.style.zIndex = "100000";

       div.style.overflow = "hidden";

       div.style.backgroundColor = "#d5dedc";

       div.style.padding = "0px";

       div.style.radiusTopLeft = "5px";

       div.style.radiusBottomLeft = "5px";

       for (var rowId = 2; rowId < data.grid.length; rowId++) {

         var row = data.grid[rowId];

         for (var colId = 1; colId < row.length; colId++) {

           var cell = row[colId];

           var active =  document.location.href.toLowerCase().startsWith(cell.tile.jumpto.toLowerCase()) ?   "active" : ""

           html +=

             "<div class="toolbarButton "+active+""  ="">"+</div>

             "

             cell.tile.jumpto +

             "'>"+

             "

             cell.tile.icon +

             "'>"+

           ""+

             "<div class="toolbarText">" +</div>

           cell.tile.title +

           ""+

             "";

           console.log(cell);

         }

       }

       div.innerHTML = html;

       ref.parentNode.insertBefore(div, ref);

     });

   }

 );

‍