K2 - Slide In/Out worklist

script.js

(function () {
	var dataLabelName = "JS - Move Worklist"; //THIS IS WHERE YOU NEED TO SPECIFY YOUR UNIQUE NAME
	$('.runtime-form').append('<div class="slideout"><div class="slideout__tab"></div><form class="slideout__form"><div class="slideout__placeholder"/></form></div>');
	var view = $('[name="' + dataLabelName + '"]').closest('.view');
	var viewHeader = $(view).find('.panel-header');
	$(viewHeader).appendTo('.slideout__tab');
	$(view).appendTo('.slideout__form');
	var slideToggle = function () {
		var slideout = $(".slideout");
		return slideout[0].classList.toggle('show');
	};
	$(function () {
		$('.slideout__form .SourceCodeFormsControlsWorklist table.nav .headerTxt').on('click', slideToggle);
		return $(".slideout__tab").on('click', slideToggle);
	});	
  
	var worklist = $(view).find('.SFC.SourceCode-Forms-Controls-Web-ControlPack-Worklist');
	var worklistId = $(worklist).attr('id');
	var worklistItems = $(worklist).find('.WorkListGridTableBody')[0];
  	//Listening to Worklist 
	var observer = new MutationObserver(function(mutations){
		mutations.forEach(function(mutation) {
			setWorklistStatus();
		});
	});
	var config = { childList: true, subtree: true };
	observer.observe(worklistItems, config);
    
    //changing the Header color to red, when we have tasks
	var setWorklistStatus = function(){
		var wlItems = JSON.parse(localStorage.getItem(worklistId))['WorklistItems'];
		if (wlItems.length > 0) {
			$('.slideout__tab .panel-header-wrapper').css('background-color', '#990000');
		} else {
			$('.slideout__tab .panel-header-wrapper').css('background-color', '');
		}
	};
  setWorklistStatus();
})();

style.css

.slideout {
    height: 100vh;
    width: 35rem;
    position: fixed;
    left: -35rem;
    top: 0;
    transition: all 0.8s;
    border: solid 1px #acacac;
    background-color: #acacac;
  }
.slideout.show{
    -webkit-transform: translate(35rem, 0);
    -moz-transform: translate(35rem, 0);
    -ms-transform: translate(35rem, 0);
    -o-transform: translate(35rem, 0);
    transform: translate(35rem, 0);
  }
.slideout__tab {
    text-align: center; 
    width: 100%;
    min-width: 4rem;
    box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.25);
    position: relative;
    left: -41rem;
    -webkit-transform: rotate(90deg) translate(100%, 2rem);
    -moz-transform: rotate(90deg) translate(100%, 2rem);
    -ms-transform: rotate(90deg) translate(100%, 2rem);
    -o-transform: rotate(90deg) translate(100%, 2rem);
    transform: rotate(90deg) translate(100%, 2rem);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border: solid 1px #acacac;
}
.slideout__tab:hover{
    -webkit-transform: rotate(90deg) translate(100%, 0);
    -moz-transform: rotate(90deg) translate(100%, 0);
    -ms-transform: rotate(90deg) translate(100%, 0);
    -o-transform: rotate(90deg) translate(100%, 0);
    transform: rotate(90deg) translate(100%, 0);
}
.slideout.show .slideout__tab{
    -webkit-transform: rotate(90deg) translate(100%, 0);
    -moz-transform: rotate(90deg) translate(100%, 0);
    -ms-transform: rotate(90deg) translate(100%, 0);
    -o-transform: rotate(90deg) translate(100%, 0);
    transform: rotate(90deg) translate(100%, 0);
}
.slideout__tab div{
    cursor: pointer;
}
.slideout__form{
    width: 100%;
    box-sizing: border-box;
    top: 0px;
    margin: 0;
    z-index: -1;
    transition: all 0.8s;
}

.slideout__form .panel-body{
    height: 100vh;
}