You need to sign in to do that
Don't have an account?

I want to close menu from another component in LWC
Parent Component Html
child component Html
Child Component JS
<template> <template if:true={overlayVisible}> <div class="overlay" id="overlay" onclick={closeNav}> </div> </template> <lightning-layout> <lightning-layout-item padding="around-small" class="frstRowLeft minPadding"> <span class="span-menu" onclick={openNav}><img src={menu} alt="Menu bar"> </span> </lightning-layout-item> </lightning layout> <template if:true={navVisible}> <c-sidebar item={navVisible} overlay={overlayVisible}></c-sidebar> </template> <template>Parent Component JS
@api navVisible = false; @api overlayVisible = false; openNav() { this.navVisible = true; this.overlayVisible = true; } closeNav() { this.navVisible = false; this.overlayVisible = false; }when I click on image sidebar open then I navigate to another page when I navigate to another page i want to close the Sidebar but it is not it is navigating to another page successfully
child component Html
<li onclick={navigateCase}> <a href="#" onmouseover={chngToWhiteCase} onmouseout={chngToBlackCase}> <template if:false={showWhiteCaseIcon}> <div class="listImg"><img src={caseicbla} alt="Cases"></div><span>Cases</span> </template> <template if:true={showWhiteCaseIcon}> <div class="listImg"><img src={caseicwht} alt="Cases"></div><span>Cases</span> </template> </a> </li> <li>
Child Component JS
@api item; @api overlay; navigateCase() { console.log('item value',this.item); console.log('overlay vale'+this.overlay); this[NavigationMixin.Navigate]({ type: 'comm__namedPage', attributes: { pageName: 'casetab' }, }); this.overlay=false; this.item = false; console.log('item value',this.item); console.log('overlay vale'+this.overlay); this.template.querySelector("c-hrwdcommunityheader").closenav(); }
I think your query is already answered here.
Let me know if that helps you and close your query by marking it as solved so that it can help others in the future.
Thanks.
All Answers
Navigation:
Make sure the you've got the right navigation imports and extensions in your child component:
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class sidebar extends NavigationMixin(LightningElement){
<your code here>
}
Menu:
I don't think you need the item and overlay attributes on the child. I don't see them being used anywhere. Instead, you need your child component in the parent like this:
<c-sidebar onclosenav={closeNav}></c-sidebar>
And in the child, dispatch a custom close event to your parent after your navigation event:
this.dispatchEvent(new CustomEvent("closenav"));
I tried your menu code but it is not working as well
I think your query is already answered here.
Let me know if that helps you and close your query by marking it as solved so that it can help others in the future.
Thanks.