Merge pull request #1946 from nextcloud/bugfix/fix-toggle-alignment

Properly align appnavigationtoggle
nextcloud-libraries · Jun 9, 2022 · 7ddc566 · 7ddc566
2 parents 728a8e7 + 371999d
commit 7ddc566
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -55,3 +55,6 @@ $navigation-width: 300px;
 
 // mobile breakpoint
 $breakpoint-mobile: 1024px;
+
+// top-bar spacing
+$topbar-margin: 4px;
diff --git a/src/components/AppContent/AppContent.vue b/src/components/AppContent/AppContent.vue
@@ -29,6 +29,10 @@ This components provides a wrapper around the main app's content.
 Single-column layouts can just use the default slot. A resizable column
 can be added by providing content to the named slot `list`.
 
+### CSS variables
+In the css section some css variables are declared and will be available for
+all the children of the AppContent component
+
 ### Examples
 
 #### Usage: Single-column content
@@ -325,6 +329,10 @@ export default {
 	// Overriding server styles TODO: cleanup!
 	margin: 0 !important;
 	background-color: var(--color-main-background);
+
+	// Variables
+	// the whitespace between the topbar content and its edges
+	--topbar-margin: $topbar-margin;
 }
 
 // Mobile list/details handling

diff --git a/src/components/AppNavigationToggle/AppNavigationToggle.vue b/src/components/AppNavigationToggle/AppNavigationToggle.vue
@@ -76,8 +76,8 @@ export default {
 
 button.app-navigation-toggle {
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: $topbar-margin;
+	right: - $topbar-margin;
 	margin-right: - $clickable-area;
 }