diff --git a/pages/side-navigation/app-layout.page.tsx b/pages/side-navigation/app-layout.page.tsx index 65521c1ede..b873ff8277 100644 --- a/pages/side-navigation/app-layout.page.tsx +++ b/pages/side-navigation/app-layout.page.tsx @@ -79,17 +79,17 @@ const items: SideNavigationProps.Item[] = [ { type: 'expandable-link-group', text: 'Expandable link group', - href: '#/light/side-navigation/app-layout/?visualRefresh=false', + href: '#/exp-link-group-inner', items: [ { type: 'link', text: 'Page 11', - href: '#/light/side-navigation/app-layout/?visualRefresh=false', + href: '#/page11', }, { type: 'link', text: 'Page 12', - href: '#/light/side-navigation/app-layout/?visualRefresh=false', + href: '#/page12', }, ], }, diff --git a/src/app-layout/__tests__/mobile.test.tsx b/src/app-layout/__tests__/mobile.test.tsx index 0715271e40..e6b9115e00 100644 --- a/src/app-layout/__tests__/mobile.test.tsx +++ b/src/app-layout/__tests__/mobile.test.tsx @@ -76,7 +76,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); }); @@ -91,7 +91,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); }); @@ -146,7 +146,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); wrapper.findNavigationToggle().click(); @@ -173,7 +173,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); wrapper.findNavigationToggle().click(); @@ -195,7 +195,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); wrapper.findNavigationToggle().click(); @@ -217,7 +217,7 @@ describeEachThemeAppLayout(true, theme => { } /> ); - // To guarantee an optimal UX on mobile, AppLyout forcely closes the navigation on the first load on mobile + // AppLayout forcely closes the navigation on the first load on mobile, so the main content is visible expect(isDrawerClosed(wrapper.findNavigation())).toBe(true); wrapper.findNavigationToggle().click(); diff --git a/src/app-layout/index.tsx b/src/app-layout/index.tsx index d0d5de7b5d..e28705d1d5 100644 --- a/src/app-layout/index.tsx +++ b/src/app-layout/index.tsx @@ -198,7 +198,7 @@ const OldAppLayout = React.forwardRef( }; useEffect(() => { - // To guarantee an optimal UX on mobile, we forcely close the navigation on this viewport + // Close navigation drawer on mobile so that the main content is visible if (isMobile) { onNavigationToggle(false); } diff --git a/src/app-layout/visual-refresh/context.tsx b/src/app-layout/visual-refresh/context.tsx index 2ea9e230f3..19edba825f 100644 --- a/src/app-layout/visual-refresh/context.tsx +++ b/src/app-layout/visual-refresh/context.tsx @@ -188,7 +188,7 @@ export const AppLayoutInternalsProvider = React.forwardRef( ); useEffect(() => { - // To guarantee an optimal UX on mobile, we forcely close the navigation on this viewport + // Close navigation drawer on mobile so that the main content is visible if (isMobile) { handleNavigationClick(false); }