From 392ddecefb7852a1a9db0ba2eb2061378aa0cb08 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Tue, 20 Sep 2022 21:31:17 +0200
Subject: [PATCH] fix(NcAppNavigation): Properly align AppNavigationToggle with
 first navigation item

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
---
 src/assets/variables.scss                                | 6 +++---
 src/components/NcAppContent/NcAppContent.vue             | 4 ----
 src/components/NcAppNavigation/NcAppNavigation.vue       | 9 ++++++++-
 .../NcAppNavigationToggle/NcAppNavigationToggle.vue      | 4 ++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 5bf9d71d74..1050b41dd3 100644
--- a/src/assets/variables.scss
+++ b/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);
diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
index dfdb028598..725886192f 100644
--- a/src/components/NcAppContent/NcAppContent.vue
+++ b/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 {
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index dbc3651ed5..c867045c91 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -142,6 +142,13 @@ 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 +191,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%;
diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
index 3a36697767..48c98561cf 100644
--- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
+++ b/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;
 }