feat(NcAppSidebar): expose CSS variable with close button offset

- var(--app-sidebar-close-button-offset)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -1287,6 +1287,9 @@ $top-buttons-spacing: 6px;
 	}
 
 	.app-sidebar-header {
+		// Variable for custom content to be aware of space taken by close button (from top-right corner)
+		--app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});
+
 		> .app-sidebar__close {
 			position: absolute;
 			z-index: 100;
@@ -1321,11 +1324,11 @@ $top-buttons-spacing: 6px;
 					padding-inline-start: 0;
 					flex: 1 1 auto;
 					min-width: 0;
-					padding-inline-end: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
+					padding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));
 					padding-top: var(--app-sidebar-padding);
 
 					&.app-sidebar-header__desc--without-actions {
-						padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
+						padding-inline-end: var(--app-sidebar-close-button-offset);
 					}
 
 					.app-sidebar-header__tertiary-actions {
@@ -1337,7 +1340,7 @@ $top-buttons-spacing: 6px;
 					}
 					.app-sidebar-header__menu {
 						top: $top-buttons-spacing;
-						inset-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
+						inset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button
 						position: absolute;
 					}
 				}
@@ -1350,14 +1353,14 @@ $top-buttons-spacing: 6px;
 			.app-sidebar-header__menu {
 				position: absolute;
 				top: $top-buttons-spacing;
-				inset-inline-end: calc($top-buttons-spacing + var(--default-clickable-area));
+				inset-inline-end: var(--app-sidebar-close-button-offset);
 			}
 			// increase the padding to not overlap the menu
 			.app-sidebar-header__desc {
-				padding-inline-end: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
+				padding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));
 
 				&.app-sidebar-header__desc--without-actions {
-					padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
+					padding-inline-end: var(--app-sidebar-close-button-offset);
 				}
 			}
 		}