bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

Collapse not working when navbar=true #419

Open metayii opened 2 years ago

metayii commented 2 years ago

sveltekit latest + svelte 3 + static plugin

Given this code:

<Navbar color="{$user.preferences.pref_modopantalla=='0' ? 'dark' : 'light'}" expand="lg" fixed="top">
    <NavbarBrand href="/">
        <span class="logo-sm">
            <img class="img-responsive center-block" src="/images/common/logo_250x76.png" style="max-height:40px;width:auto;" alt="logo" />
        </span>         
    </NavbarBrand>
    <NavbarToggler on:click={() => (isOpen = !isOpen)}>
        <span class="material-icons">menu</span>
    </NavbarToggler>
    <Collapse {isOpen} expand="lg" navbar={true} on:update={handleUpdate}>
        <Nav class="ml-auto" navbar={true}>

if I set navbar={true} then the collapsable doesn't work in small screems. If I set it to {false} then it works, but it breaks the dropdowns (which are not shown). My sollution was to change this in Collapse.svelte:

$: classes = classnames(className, navbar && 'navbar-collapse' && windowWidth >= minWidth[expand]);

That's adding && windowWidth >= minWidth[expand])

demetrius-mp commented 2 years ago

can you provide a complete example using a svelte repl?

JulioHD commented 2 years ago

This may get resolved with my pull request: https://github.com/bestguy/sveltestrap/pull/457