bestguy / sveltestrap

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

Navbar to Collapse on click #496

Open jmquintela opened 1 year ago

jmquintela commented 1 year ago

Hi, I got this issue that when I have the Collapsed menu version and I click on elements inside of it my expected response should be for the whole menu to collapse, but it's stay there instead so I this this "ugly" solution :

<Navbar dark expand="md" class="nav"  >
    <NavbarBrand href="/">
        <div class="icon">
        <img src="images/web/icon.gif" alt="paranaxus" width="50px">
        </div>
    </NavbarBrand>

    <NavbarToggler on:click={() => (isOpen = !isOpen)}   />

       <Collapse  {isOpen} navbar expand="md" on:update={handleUpdate} >

        <Nav class="ms-auto" navbar >

            <div class="menuitem" on:click={() => (isOpen = !isOpen)} >  

            <Dropdown nav inNavbar>
                <div class="menuitem" on:click|stopPropagation > 
                <DropdownToggle nav caret class="item"  >works</DropdownToggle>
                </div>
                <DropdownMenu  end  >
                  <DropdownItem on:click={() => (isOpen = !isOpen)} class="item2" href="about">storyboards</DropdownItem>
                  <DropdownItem on:click={() => (isOpen = !isOpen)} class="item2" href="about">illustrations</DropdownItem>
                  <DropdownItem on:click={() => (isOpen = !isOpen)} class="item2" href="about">drawings</DropdownItem>
                </DropdownMenu>
              </Dropdown>

        </div> 

        <div class="menuitem">  

        <NavItem class="item" >
          <NavLink on:click={() => (isOpen = !isOpen)} href="about">About | Contact</NavLink>
        </NavItem>

          </div> 

    <div class="menuitem">  

        <NavItem class="item">
          <NavLink href="about" on:click={() => (isOpen = !isOpen)}>Store</NavLink>
        </NavItem>

    </div> 

I think that the expected behavior should be for the menu to collapse by default ?

dysfunc commented 1 year ago

Hey @jmquintela! I think there's an issue with your closing <Collapse> tag. I tried to recreate the code you shared in a REPL here. Let me know if this was the desired behavior.