Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Side nav displays on small screen as empty after opening and changing screen width #739

Closed
GCHQ-Developer-847 opened this issue Jun 6, 2023 · 0 comments
Closed

Side nav displays on small screen as empty after opening and changing screen width #739

GCHQ-Developer-847 opened this issue Jun 6, 2023 · 0 comments
Assignees
@GCHQ-Developer-847
Labels
side-navigation component The generic component, includes both the web component and the React component
Milestone
V2.x

Comments

@GCHQ-Developer-847
Copy link
Contributor

Summary of the bug

When there is a side navigation component on a small screen (so that it appears across the top of the screen), if you open the menu and then increase and decrease the screen width, an empty menu is displayed.

🪜 How to reproduce

  1. Go to a page with a side nav, e.g. Storybook
  2. Decrease the screen width so that the side nav moves to the top.
  3. Open the side nav menu.
  4. Increase the screen width so that it moves back to the side.
  5. Decrease the screen width so it moves to the top again.
  6. See that the menu is open and is not displaying anything - it is empty.

🧐 Expected behaviour

The menu should display the navigation items as normal. (Or should it just be collapsed again? Worth checking with a designer maybe).

📸 Screenshots or code

image

🖥 Desktop

  • OS: MacOS
  • Browser: Chrome, Safari, Firefox

On Safari and Firefox, the nav items appear for a second and then disappear.

Additional info

Make sure to check that the fix works with slotted links as well.
@GCHQ-Developer-847 GCHQ-Developer-847 added the side-navigation component The generic component, includes both the web component and the React component label Jun 6, 2023
@GCHQ-Developer-847 GCHQ-Developer-847 mentioned this issue Jun 7, 2023
Closed
@MI6-94 MI6-94 added this to the V2.x milestone Jun 14, 2023
@GCHQ-Developer-847 GCHQ-Developer-847 self-assigned this Jul 13, 2023
GCHQ-Developer-847 added a commit that referenced this issue Jul 14, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
0f1cb46 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-847 added a commit that referenced this issue Jul 14, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
4618261 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
This was referenced Jul 17, 2023
Merged
Closed
GCHQ-Developer-847 added a commit that referenced this issue Jul 17, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
ea80a7f 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-847 added a commit that referenced this issue Jul 18, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
97ef76f 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-847 added a commit that referenced this issue Jul 18, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
630770d 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-847 added a commit that referenced this issue Jul 18, 2023
@GCHQ-Developer-847
fix(web-components): update side nav CSS to ensure visibility of menu…
428d3a5 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-530 pushed a commit that referenced this issue Jul 20, 2023
@GCHQ-Developer-847 @GCHQ-Developer-530
fix(web-components): update side nav CSS to ensure visibility of menu…
41d27df 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
GCHQ-Developer-530 pushed a commit that referenced this issue Jul 21, 2023
@GCHQ-Developer-847 @GCHQ-Developer-530
fix(web-components): update side nav CSS to ensure visibility of menu…
35023be 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
jd239 pushed a commit that referenced this issue Jul 24, 2023
@GCHQ-Developer-847 @jd239
fix(web-components): update side nav CSS to ensure visibility of menu…
d2affdf 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
jd239 pushed a commit that referenced this issue Jul 24, 2023
@GCHQ-Developer-847 @jd239
fix(web-components): update side nav CSS to ensure visibility of menu…
a4619be 
… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@GCHQ-Developer-847 GCHQ-Developer-847

Labels
side-navigation component The generic component, includes both the web component and the React component
Projects
Intelligence Community Design System
Archived in project
Milestone
V2.x
Development

No branches or pull requests
2 participants
@MI6-94 @GCHQ-Developer-847