Responsive nav animation broken and sidenav close button missing in 13.1.x+

[krnhotwings]

Describe the bug

When the browser window is narrow and responsive menus are visible (e.g. hamburger icon,) opening the hamburger menu should open with an ease-in animation and close with ease-out; however, there are two problems in 13.1.x+:

• There is no animation
  • When the window is resized, "something" resets such that animation works on the initial open but stops working thereafter until the next resize
• The close button is not visible if the sidenav is set with ClrNavLevel 1
  • The element exists but is not visible

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-3a2dsz?file=package.json

Steps to reproduce the behavior:

1. Go to the stackblitz link and, in the right pane, open and close the hamburger menu a few times
2. When opening and closing, there is no ease animation
3. When open, the "X" close button is missing (only affects class="sidenav" [clr-nav-level]="1")

~13.2.0 behaves the same as ~13.1.0. ~13.0.0 does not exhibit this behavior.

Expected behavior

Responsive nav menus should open and close with appropriate animations. Close button should be visible for sidenav + ClrNavLevel = 1.

Versions

Clarity version:

• [ ] v12.x
• [ ] v13.x
• [x] Other: 13.1.x, 13.2.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version:

Angular 13

Device:

• Type: Desktop computer
• OS: Fedora 35
• Browser: Chrome, Firefox
• Version: Chrome 100.0.4896.88, Firefox 99.0

[bbogdanov]

Hi @krnhotwings,

It's been a hard issue to fix with latest changes on the ClrNavLevel so thank you for letting us know about the issues you are seeing.

I have a hard time with your second point The close button is not visible if the sidenav is set with ClrNavLevel 1 The element exists but is not visible. Could you please provide more info cause I am not able to reproduce it?

[krnhotwings]

Hi @bbogdanov

For the stackblitz that I've linked, I started it with clarity v13.0.0 to show it in an initial working state. The reproduction steps say to modify package.json to update clarity to v13.2.0, but I realize that it's probably better to start the stackblitz in a broken state. I've since updated it to default to v13.2.0, and I will update the reproduction steps above. If you revisit the link, you should see this:

There should be an "X" close button in the top right area, but it's not visible. The HTML can be viewed in app.component.html

(Just to reiterate, the issue seems to have been introduced in clarity ~13.1.0)

[bbogdanov]

Thank you! I'll investigate and see what's really causing the x button to hidden behind the right corner cause it is actually there and you can focus it by clicking - tab after opening the nav.

[kevinbuhmann]

This was fixed in #101.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.