Doxter CP sticky header position tweak for Craft CMS

doxter-cp-sticky-header-position.js

// This is a small fix for the sticky header position for Doxter, https://github.com/verbb/doxter
// I've included it in the Craft CMS control panel with another plugin, https://github.com/doublesecretagency/craft-cpjs
// but it could also be included in a custom module.

let resizeTimeout
let styleTag
let ruleIndex

window.addEventListener('resize', () => {
	clearTimeout(resizeTimeout)
	resizeTimeout = setTimeout(resetDoxterHeaderTop, 350)
})

window.addEventListener('load', () => {
	// Create a style tag once on page load
	styleTag = document.createElement('style')
	document.head.appendChild(styleTag)
	resetDoxterHeaderTop()
})

function resetDoxterHeaderTop() {
	// get rid of old styleTag
	if (ruleIndex !== undefined) {
		styleTag.sheet.deleteRule(ruleIndex)
  	}

    // get #header element
	const header = document.getElementById("header");

	if (header){
		ruleIndex = styleTag.sheet.insertRule(
			`.doxter .editor-toolbar {
				z-index:2;
				top: ${header.clientHeight}px;
		} `,
			0
		)
	}

}