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

Antreesy · backportbot[bot] · commit 25974cbaeb92 · 2025-04-25T09:57:04.000Z
- var(--app-sidebar-close-button-offset)

Signed-off-by: Maksim Sukharev &lt;antreesy.web@gmail.com&gt;
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1305,6 +1305,9 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 	}
 
 	.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;
@@ -1340,11 +1343,11 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 					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 {
@@ -1356,7 +1359,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 					}
 					.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;
 					}
 				}
@@ -1369,14 +1372,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 			.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);
 				}
 			}
 		}

Original file line number	Diff line number	Diff line change
`@@ -1305,6 +1305,9 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation`
`1305`	`1305`	`}`
`1306`	`1306`
`1307`	`1307`	`.app-sidebar-header {`
	`1308`	`+ // Variable for custom content to be aware of space taken by close button (from top-right corner)`
	`1309`	`+ --app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});`
	`1310`	`+`
`1308`	`1311`	`> .app-sidebar__close {`
`1309`	`1312`	`position: absolute;`
`1310`	`1313`	`z-index: 100;`
`@@ -1340,11 +1343,11 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation`
`1340`	`1343`	`padding-inline-start: 0;`
`1341`	`1344`	`flex: 1 1 auto;`
`1342`	`1345`	`min-width: 0;`
`1343`		`- padding-inline-end: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);`
	`1346`	`+ padding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));`
`1344`	`1347`	`padding-top: var(--app-sidebar-padding);`
`1345`	`1348`
`1346`	`1349`	`&.app-sidebar-header__desc--without-actions {`
`1347`		`- padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);`
	`1350`	`+ padding-inline-end: var(--app-sidebar-close-button-offset);`
`1348`	`1351`	`}`
`1349`	`1352`
`1350`	`1353`	`.app-sidebar-header__tertiary-actions {`
`@@ -1356,7 +1359,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation`
`1356`	`1359`	`}`
`1357`	`1360`	`.app-sidebar-header__menu {`
`1358`	`1361`	`top: $top-buttons-spacing;`
`1359`		`- inset-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button`
	`1362`	`+ inset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button`
`1360`	`1363`	`position: absolute;`
`1361`	`1364`	`}`
`1362`	`1365`	`}`
`@@ -1369,14 +1372,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation`
`1369`	`1372`	`.app-sidebar-header__menu {`
`1370`	`1373`	`position: absolute;`
`1371`	`1374`	`top: $top-buttons-spacing;`
`1372`		`- inset-inline-end: calc($top-buttons-spacing + var(--default-clickable-area));`
	`1375`	`+ inset-inline-end: var(--app-sidebar-close-button-offset);`
`1373`	`1376`	`}`
`1374`	`1377`	`// increase the padding to not overlap the menu`
`1375`	`1378`	`.app-sidebar-header__desc {`
`1376`		`- padding-inline-end: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);`
	`1379`	`+ padding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));`
`1377`	`1380`
`1378`	`1381`	`&.app-sidebar-header__desc--without-actions {`
`1379`		`- padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);`
	`1382`	`+ padding-inline-end: var(--app-sidebar-close-button-offset);`
`1380`	`1383`	`}`
`1381`	`1384`	`}`
`1382`	`1385`	`}`