aws/aws-northstar

AppLayout in mobile view does not display side navigation as expected

adriantadros opened this issue · 1 comments

adriantadros commented

Describe the bug
When using the AppLayout component and viewing on a mobile device or small screen size, there are a number of issues.

  • The side navigation is displayed when first landing on the page (it should be hidden on a small screen)
  • The side navigation is hidden behind the top header bar - this causes the close icon hidden and header text in the side navigation to be hidden
  • Clicking on a link the side navigation keeps the side navigation open - clicking on a link does not take the user to the screen they expect to see

Versions
Which version of aws-northstar npm package is installed?
@aws-northstar/ui 1.1.2

To Reproduce
Please check code sandbox here:
https://codesandbox.io/s/strange-ritchie-8j5ssq?file=/src/App.tsx&resolutionWidth=320&resolutionHeight=675

Expected behavior

  • Side navigation hidden by default on mobile view
  • Side navigation shifted down slightly so that it is not hidden behind the top header
  • Side navigation links automatically close the side navigation when clicked (only on mobile/small screen)

Screenshots
image

Desktop (please complete the following information):

  • OS: Mac OS - Ventura 13.4
  • Browser: Chrome
  • Version 114.0.5735.133

Smartphone (please complete the following information):

  • Device: iPhone 11
  • OS: iOS 16.5
  • Browser: Safari
jessieweiyi commented

🎉 This issue has been resolved in @aws-northstar/ui version 1.1.3 🎉