Merge pull request #4869 from nextcloud-libraries/fix/app-navigation-…

…-closed-on-mobile-by-default fix(NcAppNavigation): closed on mobile initially
nextcloud-libraries · Nov 22, 2023 · 570fa66 · 570fa66
2 parents 6e2963a + 7b035c4
commit 570fa66
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -93,12 +93,6 @@ export default {
 		NcAppNavigationToggle,
 	},
 
-	setup() {
-		return {
-			isMobile: useIsMobile(),
-		}
-	},
-
 	props: {
 		/**
 		 * The aria label to describe the navigation
@@ -117,9 +111,15 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
-			open: true,
+			open: !this.isMobile,
 			focusTrap: null,
 		}
 	},

diff --git a/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js b/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js
@@ -39,6 +39,11 @@ const findNavigation = (wrapper) => wrapper.get(NAVIGATION__SELECTOR)
 const findToggleButton = (wrapper) => wrapper.get(TOGGLE_BUTTON__SELECTOR)
 
 describe('NcAppNavigation.vue', () => {
+	beforeEach(async () => {
+		// Emulate desktop size
+		await resizeWindowWidth(1024)
+	})
+
 	describe('by default', () => {
 		it('is open', () => {
 			const wrapper = mount(NcAppNavigation)
@@ -81,10 +86,6 @@ describe('NcAppNavigation.vue', () => {
 	})
 
 	describe('toggle via mobile state', () => {
-		beforeEach(async () => {
-			await resizeWindowWidth(1024)
-		})
-
 		it('closes on switch to mobile', async () => {
 			const wrapper = mount(NcAppNavigation)