Duplicate animated close button for vertical nav burger item

[derkoe]

Describe the bug

https://github.com/porscheinformatik/clarity-addons/assets/123199/0bf16b34-6686-4e6f-9cb6-072eef16decb

To Reproduce

Open the Stackblitz and click on the Hamburger menu: https://stackblitz.com/edit/clarity-dark-theme-clr17-ittm1w?file=package.json

You can see that the "X" icon is shown twice - once it is moved in from the left.

Expected behavior

The "X" close should be shown one.

Versions

App

• Angular: 17
• Node: 20
• Clarity: 17
• Clarity-Addons: 17.2.1

Additional context

-

[derkoe]

A workaround is to add this to your own styles:

@media screen and (max-width: 992px) and (min-width: 768px) {
  .main-container.open-hamburger-menu .header-hamburger-trigger, .main-container.open-overflow-menu .header-overflow-trigger {
      transform: none;
  }
}

[d-m-s]

thx @derkoe, ad Expected behavior: Checking the docu it seems that the one sliding in from the left is the one to keep, the other one should be removed. So it should be shown once, and there should be no overrides in clarity-addons! The native behavior from clarity should be kept unaltered.

[DaSmid]

Fixed with #2211