function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
akshay desai 9akshay desai 9 

I want to close menu from another component in LWC

Parent Component Html
<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();
    }



 
Best Answer chosen by akshay desai 9
AbhishekAbhishek (Salesforce Developers) 
https://trailblazers.salesforce.com/answers?id=9064S000000DIRRQA4

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

GCW LabsGCW Labs
Not sure if your issue is closing the menu or navigation:

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"));
 
akshay desai 9akshay desai 9
The problem is when i navigate to another page the menu is not closing
I tried your menu code but it is not working as well
AbhishekAbhishek (Salesforce Developers) 
https://trailblazers.salesforce.com/answers?id=9064S000000DIRRQA4

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.
This was selected as the best answer