sveltestrap icon indicating copy to clipboard operation
sveltestrap copied to clipboard

Navbar to Collapse on click

Open jmquintela opened this issue 3 years ago • 1 comments
trafficstars

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 ?

jmquintela avatar Jul 24 '22 04:07 jmquintela

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.

dysfunc avatar Nov 23 '22 15:11 dysfunc