fix(NcAppNavigation): Properly align AppNavigationToggle with first n…

…avigation item

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

src/assets/variables.scss

@@ -56,8 +56,8 @@ $navigation-width: 300px;
 // mobile breakpoint
 $breakpoint-mobile: 1024px;
 
-// top-bar spacing
-$topbar-margin: 4px;
-
 // navigation spacing
 $app-navigation-settings-margin: 3px;
+
+// navigation items
+$app-navigation-padding: calc(var(--default-grid-baseline, 4px) * 2);

src/components/NcAppContent/NcAppContent.vue

@@ -357,10 +357,6 @@ export default {
 	&:not(.app-content--has-list) {
 		overflow: auto;
 	}
-
-	// Variables
-	// the whitespace between the topbar content and its edges
-	--topbar-margin: #{$topbar-margin};
 }
 
 .app-content-wrapper {

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -142,6 +142,14 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.app-navigation,
+.app-content {
+	/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */
+	--app-navigation-padding: #{$app-navigation-padding};
+}
+</style>
+
 <style lang="scss" scoped>
 .app-navigation {
 	// Set scoped variable override
@@ -184,7 +192,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		gap: var(--default-grid-baseline, 4px);
-		padding: calc(var(--default-grid-baseline, 4px) * 2);
+		padding: var(--app-navigation-padding);
 	}
 	&__content {
 		height: 100%;

src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue

@@ -83,8 +83,8 @@ export default {
 
 button.app-navigation-toggle {
 	position: absolute;
-	top: $topbar-margin;
-	right: - $topbar-margin;
+	top: var(--app-navigation-padding);
+	right: calc(0px - var(--app-navigation-padding));
 	margin-right: - $clickable-area;
 }