adding background no scroll to when the off canvas area is open

src/assets/js/kb-off-canvas-trigger.js

@@ -11,10 +11,16 @@
 		focusableElements = Array.prototype.slice.call(focusableElements);
 		const firstFocusableElement = focusableElements[0];
 		const lastFocusableElement = focusableElements[focusableElements.length - 1];
+		const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
 
 		const openOffCanvas = function (event) {
+			document.body.style.setProperty('--kb-scrollbar-offset', scrollBarWidth + 'px');
+			document.body.classList.add('kb-modal-open');
+			document.body.classList.add('kb-scrollbar-fixer');
+
 			event.target.classList.add('triggered');
 			offCanvasArea.classList.add('show-off-canvas');
+
 			setTimeout(function () {
 				offCanvasArea.classList.add('active');
 				triggerButtons.forEach((button) => button.setAttribute('aria-expanded', 'true'));
@@ -23,6 +29,9 @@
 		};
 
 		const closeOffCanvas = function () {
+			document.body.classList.remove('kb-modal-open');
+			document.body.classList.remove('kb-scrollbar-fixer');
+
 			offCanvasArea.classList.remove('active');
 			triggerButtons.forEach((button) => button.setAttribute('aria-expanded', 'false'));
 			for (let i = 0; i < triggerButtons.length; i++) {

src/blocks/header/children/off-canvas/style.scss

@@ -108,3 +108,14 @@ body.admin-bar .kb-off-canvas-inner-wrap {
 		top: $admin-bar-height;
 	}
 }
+
+body.kb-modal-open {
+	overflow: hidden;
+}
+
+.kb-scrollbar-fixer {
+	margin-right: var(--kb-scrollbar-offset, unset);
+	.item-is-fixed {
+		right: var(--kb-scrollbar-offset, 0);
+	}
+}