sveltestrap
sveltestrap copied to clipboard
Navbar to Collapse on click
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 ?
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.