Properly align AppNavigationToggle with first navigation item

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
nextcloud-libraries · Sep 23, 2022 · 6b22cef · 6b22cef
1 parent 9a93f35
commit 6b22cef
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 10 deletions.
diff --git 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
@@ -334,10 +334,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
@@ -178,7 +178,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		gap: var(--default-grid-baseline, 4px);
-		padding: calc(var(--default-grid-baseline, 4px) * 2);
+		padding: $app-navigation-padding;
 	}
 }
 

diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -80,8 +80,8 @@ export default {
 
 button.app-navigation-toggle {
 	position: absolute;
-	top: $topbar-margin;
-	right: - $topbar-margin;
+	top: $app-navigation-padding;
+	right: calc(0px - $app-navigation-padding);
 	margin-right: - $clickable-area;
 }