<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>

@api navVisible = false;
  @api overlayVisible = false;
openNav() {
        this.navVisible = true;
        this.overlayVisible = true;
    }
    closeNav() {
        this.navVisible = false;
        this.overlayVisible = false;
    }

<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>

@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();
    }