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

ld-sidenav: heading hidden and navitems positioned wrong on mobile #286

Closed
renet opened this issue Mar 9, 2022 · 2 comments
Closed

ld-sidenav: heading hidden and navitems positioned wrong on mobile #286

renet opened this issue Mar 9, 2022 · 2 comments
Assignees
@borisdiakur
Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released

Comments

@renet
Copy link
Member

renet commented Mar 9, 2022

Bug description

When a narrow collapsible ld-sidenav is collapsed and is being opened on mobile (viewport width < value of breakpoint prop), the following items are not styled correctly:

  • ld-sidenav-headings are hidden.
  • ld-sidenav-navitems are displayed in the wrong vertical position, whilst
  • ld-sidenav-separators inside the ld-sidenav-slider are positioned correctly.

Steps to reproduce the behavior

  1. Go to https://codesandbox.io/s/liquid-sandbox-next-tailwind-z3wgi?file=/pages/index.tsx
  2. Make sure the sidenav is collapsed.
  3. Reduce the viewport to a width < value of breakpoint prop.
  4. If necessary, click on the burger menu icon to open the ld-sidenav.

Expected behavior

  • ld-sidenav-headings are visible.
  • ld-sidenav-navitems are displayed in the right vertical position.

Actual behavior

  • ld-sidenav-headings are hidden.
  • ld-sidenav-navitems are displayed in the wrong vertical position
@renet renet added bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. labels Mar 9, 2022
@borisdiakur borisdiakur added the in progress This label indicates that the issue is currently being worked on. label Apr 28, 2022
@borisdiakur borisdiakur self-assigned this Apr 28, 2022
renet pushed a commit that referenced this issue Apr 29, 2022
@borisdiakur @renet
fix(ld-sidenav): toggle stack to top on breakpoint change
18cf098 
Resolves #286
github-actions bot pushed a commit that referenced this issue Apr 29, 2022
@semantic-release-bot
chore(release): 1.7.0 [skip ci]
ddc3c4f 
# [1.7.0](v1.6.1...v1.7.0) (2022-04-29)

### Bug Fixes

* **ld-button:** enable danger/highlight on brand color ([eaf90b9](eaf90b9))
* **ld-sidenav:** toggle stack to top on breakpoint change ([18cf098](18cf098)), closes [#286](#286)

### Features

* **ld-sidenav:** integrate accordion with sidenav ([42ed614](42ed614))
* **ld-tooltip:** allow passing custom tether options to tooltip ([e03d094](e03d094))
@borisdiakur borisdiakur added released done and removed in progress This label indicates that the issue is currently being worked on. done released labels Apr 29, 2022
@borisdiakur
Copy link
Contributor

Still broken 😬. Reproduction instructions:

  1. Navigate to https://emdgroup-liquid.github.io/liquid/components/ld-sidenav/#narrow-mode
  2. Resize the view port to mobile
  3. Click on Artificial Intelligence
  4. Resize the view port to desktop

Current behavior:

Screenshot 2022-05-04 at 11 18 41

Expected behavior:

Screenshot 2022-05-04 at 16 36 47

@borisdiakur borisdiakur reopened this May 4, 2022
github-actions bot pushed a commit that referenced this issue May 4, 2022
@semantic-release-bot
chore(release): 1.8.0 [skip ci]
e5afd55 
# [1.8.0](v1.7.0...v1.8.0) (2022-05-04)

### Bug Fixes

* **ld-button:** enable danger/highlight on brand color ([d3edb47](d3edb47))
* **ld-sidenav:** toggle stack to top on breakpoint change ([b116fd9](b116fd9)), closes [#286](#286)
* **ld-sidenav:** unhide elements on slide change ([89ec4fa](89ec4fa)), closes [#286](#286)
* **ld-tooltip:** remove stopPropagation for mouse events on triggerType hover ([d9ec6f4](d9ec6f4))

### Features

* **ld-notice:** add success mode and custom icon ([63572a6](63572a6))
* **ld-sidenav:** integrate accordion with sidenav ([94f73ee](94f73ee))
* **ld-tooltip:** allow passing custom tether options to tooltip ([780c784](780c784))
@borisdiakur
Copy link
Contributor

🎉 This issue has been resolved in version 1.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

@borisdiakur borisdiakur

Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@borisdiakur @renet