Fixing Collapse.svelte when used within a navbar

[JulioHD]

Hi there

I came across some issues using collapse within a navbar, with this following issues should be fixed:

• Animation triggers when opening a page using a navbar with a collapse
• Animation triggers when the screen gets smaller and the collapse starts to hide (and other way around)
• Toggler button for collapse is not being focused when clicked
• Toggler button can be toggled mid animation (not the case with bootstrap's js)

The collapse no longer removes and re-adds it's content to the dom, instead it uses bootstrap's "d-none" class to hide it. I do that so bootstrap's "navbar-expand-xx" class can show the collapse content again, when a certain screen size is reached. We no longer need to check for that and it won't animate for a second.

Example code:

<Navbar expand="md">
  <NavbarBrand href="#">Test</NavbarBrand>
  <NavbarToggler id="exampleNavToggler"/>
  <Collapse toggler="#exampleNavToggler" navbar>
    <Nav class="ms-auto" navbar>
      <NavItem>
        <NavLink href="#">Test</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

Unfortunately I couldn't find a solution how to prevent isOpen from changing, when it's accessed directly.

[fkrauthan]

Any news on getting this merged? Especially that when using Collapse in a navbar that on desktop it has a fade in animation is really annoying.

[JulioHD]

Any news on getting this merged? Especially that when using Collapse in a navbar that on desktop it has a fade in animation is really annoying.

Maintainer seems to be inactive again, never heard from him on this issue. This pull request is a bit unclean anyways, I mistakenly fixed another issue in the branch for my personal project, so I get why this isn't being accepted. I would correct that, if needed.