<ul className="nav navbar-nav">
    {megaMenu2.map(({ label, className, submenu }, index) => {
    if (!className.includes("full-width")) {
        return (
        <li key={index} className={className}>
            <Link to={"#"}>
            <span>{label}</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="sub-menu sub-menu-md p-lg-3 py-3">
            <div className="row">
                {submenu?.map(({ icon, title, text, bg, img }, inde) => {
                if (bg) {
                    return (
                    <div className="col-lg-12" key={inde}>
                        <Link to={"#"} className={\`card p-0  border-0 text-white m-b10 \${bg}\`}>
                        <div className="card-body d-flex">
                            <div dangerouslySetInnerHTML={{ __html: icon }}></div>
                            <div className="clearfix">
                            <h6 className="card-title m-b0">{title}</h6>
                            <span className="small">{text}</span>
                            </div>
                        </div>
                        </Link>
                    </div>
                    );
                } else if (img) {
                    return (
                    <div className="col-lg-12">
                        <Link to={"#"}
                        className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                        style={{ backgroundImage: \`url(\${img})\`, backgroundPosition: "center" }}
                        >
                        <div className="overlay-content">
                            <h6 className="card-title m-b0">{title}</h6>
                        </div>
                        </Link>
                    </div>
                    );
                } else {
                    return (
                    <div className="col-lg-12">
                        <Link to={"#"} className="card p-0 card-hover border-0">
                        <div className="card-body d-flex">
                            <i className={icon}></i>
                            <div className="clearfix">
                            <h6 className="card-title m-b0">{title}</h6>
                            <span className="small">{text}</span>
                            </div>
                        </div>
                        </Link>
                    </div>
                    );
                }
                })}
            </div>
            </div>
        </li>
        );
    } else if (className.includes("full_width1")) {
        return (
        <li className={className}>
            <Link to={"#"}>
            <span>Left Banner</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="mega-menu ps-lg-0 py-lg-0">
            <div className="row">
                <div className="col-lg-4 pe-lg-4">
                <div
                    className="card p-5 rounded-0 border-0 m-b3 card-overlay bg-opacity-50 h-100 text-white"
                    style={{ backgroundImage: \`url(\${IMAGES.middle_pic1})\`, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "cover" }}
                >
                    <div className="overlay-content">
                    <span className="card-title h4 m-b2 d-block text-white">Game Zone</span>
                    <p className="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                </div>
                <div className="col-lg-2 py-3">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                </ul>
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-3 py-3">
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-facebook me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Facebook</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-twitter me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Twitter</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-linkedin me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Linkedin</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                </div>
                <div className="col-lg-3 py-3">
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic1})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">Galaxy</h6>
                    </div>
                </Link>
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic2})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">PC Gaming</h6>
                    </div>
                </Link>
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic3})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">War Zone Landscape</h6>
                    </div>
                </Link>
                </div>
            </div>
            </div>
        </li>
        );
    } else {
        return (
        <li className={className}>
            <Link to={"#"}>
            <span>Right Banner</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="mega-menu pb-lg-0 pe-lg-3">
            <div className="row">
                <div className="col-lg-2">
                <span className="menu-title">Social Icons</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <i className="fa-solid fa-basketball me-1"></i>
                        <span>Dribbble</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-facebook me-1"></i>
                        <span>Facebook</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-instagram me-1"></i>
                        <span>Instagram</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-linkedin me-1"></i>
                        <span>Linkedin</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-pinterest me-1"></i>
                        <span>Pinterest</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-behance me-1"></i>
                        <span>Behance</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-twitter me-1"></i>
                        <span>Twitter</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-tiktok me-1"></i>
                        <span>Tiktok</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-2">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 4</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 5</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 6</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 7</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 8</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 9</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 10</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-2">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 4</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 5</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 6</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 7</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 8</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 9</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 10</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-6">
                <div className="row h-100">
                    <div className="col-lg-4 m-b3">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-4 m-b3">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-4">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-12 pe-lg-0 d-flex align-items-end pb-lg-1">
                    <img src={IMAGES.bnr1} alt="" />
                    </div>
                </div>
                </div>
            </div>
            </div>
        </li>
        );
    }
    })}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="has-mega-menu sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route"><span>{{ item.title }}</span>
		@if(item.badge){
		   <span class="badge badge-drop bg-{{ item.badge.color }} {{ item.badge.style }}">{{ item.badge.text }}</span> 
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
	 <div [ngClass]="item.style ? item.style : 'sub-menu sub-menu-md p-lg-3 py-3'">
		<div class="row">
		   @for(subitem of item?.subMenu; track subitem; let subitemIndex = $index){
			  @if(subitemIndex == 0 && subitem.subitemGrid && subitem.image){
				 <div class="{{ subitem.subitemGrid }}">
					<div class="card p-5 rounded-0 border-0 m-b3 card-overlay bg-opacity-50 h-100 text-white" style="background-image: url('{{subitem.image}}'); background-position: center; background-repeat: no-repeat; background-size: cover;">
					   <div class="overlay-content">
						  <span class="card-title h4 m-b2 d-block text-white">{{ subitem.title }}</span>
						  <p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					   </div>
					</div>
				 </div>
			  } @else {
				 <div class="{{ subitem.subitemGrid?subitem.subitemGrid:'col-lg-12'}} ">
					@if(item.style && subitem.subitemGrid != 'col-lg-6'){
					   @if(subitem.subitemType == 'icon'){
						  @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
						  <a href="javascript:void(0);" class="card p-0 card-hover border-0 m-b2">
							 <div class="card-body d-flex">
								<i class="{{ subSubItem.icon }} me-3 m-t1 fs-2"></i>
								<div class="clearfix">
								   <h6 class="card-title m-b0">{{ subSubItem.title }}</h6>
								   <span class="small">{{ subSubItem.desc }}</span>
								</div>
							 </div>
						  </a>
						  }
					   } @else if(subitem.subitemType == 'image') { 
						  @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
						  <a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('{{ subSubItem.image }}'); background-position: center;">
							 <div class="overlay-content">
								<h6 class="card-title m-b0">{{ subSubItem.title }}</h6>
							 </div>
						  </a>
						  }
					   } @else {
						  <span class="menu-title">{{ subitem.title }}</span>
						  <ul class="list-hover3">
							 @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
							 <li>
								<a [routerLink]="subSubItem.route">
								   <i *ngIf="subSubItem.icon" class="{{ subSubItem.icon }} me-1"></i>
								   <span>{{ subSubItem.title }}</span>
								   @if(subSubItem.subsubMenuBadge){
									  <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
								   }
								</a>
							 </li>
							 }
						  </ul>
						  @if(subitem.subsubMenu2){
						  <span class="menu-title">{{ subitem.title2 }}</span>
						  <ul class="list-hover3">
							 <li>
								@for(subSubItem of subitem?.subsubMenu2; track subSubItem; let subIndex = $index){
								   <a [routerLink]="subSubItem.route">
									  <span>{{ subSubItem.title }}</span>
									  @if(subSubItem.subsubMenuBadge){
										 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
									  }
								   </a>
								}
							 </li>
						  </ul>
						  }  
					   }
					} @else if(subitem.subitemGrid == 'col-lg-6'){ 
					   <div class="row h-100">
						  <div *ngFor="let e of [].constructor(3);" class="col-lg-4 m-b3">
							 <span class="menu-title">{{ subitem.title }}</span>
							 <ul class="list-hover3">
								@for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
								<li>
								   <a href="javascript:void(0);">
									  <i *ngIf="subSubItem.icon" class="{{ subSubItem.icon }} me-1"></i>
									  <span>{{ subSubItem.title }}</span>
									  @if(subSubItem.subsubMenuBadge){
										 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
									  }
								   </a>
								</li>
								}
							 </ul>
						  </div>
						  <div class="col-lg-12 pe-lg-0 d-flex align-items-end pb-lg-1">
							 <img src="images/bnr1.jpg" alt="">						
						  </div>
					   </div>
					} @else {
					   <a href="javascript:void(0);" class="card p-0 border-0 {{ subitem.subMenuClass }}" [ngStyle]="subitem.image ? {'background-image': 'url(' + subitem.image + ')', 'background-position': 'center'} : {}">                                
						  @if(subitem.image){
							 <div class="overlay-content">
								<h6 class="card-title m-b0">{{ subitem.title }}</h6>
							 </div>
						  } @else {
							 <div class="card-body d-flex">
								<span *ngIf="subitem.svg" [innerHTML]="sanitizeSvg(subitem.svg)"></span>
								<i *ngIf="subitem.icon" class="{{ subitem.icon }} me-3 m-t1 fs-2"></i>
								<div class="clearfix">
								   <h6 class="card-title m-b0">{{ subitem.title }}</h6>
								   <span class="small">{{ subitem.desc }}</span>
								</div>
							 </div>
						  }
					   </a>
					}
				 </div>
			  }
		   }
		</div>
	 </div>
	 }
  </li>
  }
</ul>
						

<ul className="nav navbar-nav">
    {megaMenu3.map(({ label, submenu, className }, index) => (
        <li className={className} key={index}>
            <Link to={"#"}>
            <span>{label}</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            {className.includes("menu-left") ? (
            <div className="mega-menu">
                <ul className="demo-menu">
                {submenu?.map(({ img, label }, inde) => (
                    <li>
                    <Link to={"#"} key={inde}>
                        <img src={img} alt="/" className="rounded" />
                        <span className="menu-title">{label}</span>
                    </Link>
                    </li>
                ))}
                </ul>
            </div>
        ) : (
        <>
            {className.includes("fixed_menu") ? (
            <div className="mega-menu menu-media-right">
                <ul>
                <li className="side-left">
                    <ul>
                    {submenu?.map(({ label, child }, ind) => (
                        <li key={ind}>
                        <span className="menu-title">{label}</span>
                        <ul className="list-hover5">
                            {child?.map(({ label }) => (
                            <li>
                                <Link to={"#"}>
                                <span>{label}</span>
                                </Link>
                            </li>
                            ))}
                        </ul>
                        </li>
                    ))}
                    <li className="month-deal">
                        <div className="clearfix p-r5">
                        <h4 className="m-b5">Deal of the month</h4>
                        <p className="m-b0">
                            Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio{" "}
                            <Link to={"#"}>View All Products</Link>
                        </p>
                        </div>
                        <div className="sale-countdown">
                        <div className="countdown">
                            <div className="date">
                            <span className="time days">{timer.days}</span>
                            <span className="work-time">Days</span>
                            </div>
                            <div className="date">
                            <span className="time hours">{timer.hours}</span>
                            <span className="work-time">Hours</span>
                            </div>
                            <div className="date">
                            <span className="time mins">{timer.minutes}</span>
                            <span className="work-time">Minutess</span>
                            </div>
                            <div className="date">
                            <span className="time secs">{timer.seconds}</span>
                            <span className="work-time">Second</span>
                            </div>
                        </div>
                        </div>
                    </li>
                    </ul>
                </li>
                <li className="side-right">
                    <div className="adv-media">
                    <img src={IMAGES.large_pic2} alt="" />
                    </div>
                </li>
                </ul>
            </div>
            ) : (
            <div className="mega-menu menu-media-left">
                <ul>
                <li className="side-left">
                    <ul className="portfolio-nav-link">
                    {submenu.map(({ label, img }, ind) => (
                        <li key={ind}>
                        <Link to={"#"}>
                            <img src={img} alt="/" className="rounded" />
                            <span>{label}</span>
                        </Link>
                        </li>
                    ))}
                    </ul>
                </li>
                <li className="side-right line-left">
                    <span className="menu-title">Portfolio Details</span>
                    <ul>
                    {[1, 2, 3, 4].map((el) => (
                        <li>
                        <Link to={"#"}>Nav Link {el}</Link>
                        </li>
                    ))}
                    </ul>
                </li>
                </ul>
            </div>
            )}
        </>
        )}
    </li>
    ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="has-mega-menu sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   <span class="badge badge-drop bg-{{ item.badge.color }} {{ item.badge.style }}">{{ item.badge.text }}</span> 
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
		@if(item.type == 'type-1'){
		<div class="mega-menu">
		   <ul class="demo-menu">
			  @for(subitem of item?.subMenu; track subitem;){
			  <li>
				 <a [routerLink]="subitem.route ? [subitem.route] : []">
					<img src="{{ subitem.image }}" alt="/" class="rounded">
					<span class="menu-title">{{ subitem.title }}</span>
				 </a>
			  </li>
			  }
		   </ul>
		</div>
		} @else if(item.type == 'type-2') {
		   <div class="mega-menu menu-media-right">
			  <ul>
				 <li class="side-left">
					<ul>
					@for(subitem of item?.subMenu; track subitem; let subitemIndex = $index){
					   @if(subitem.countdown){
						  <li class="month-deal">
							 <div class="clearfix p-r5">
								<h4 class="m-b5">{{ subitem.title }}</h4>
								<p class="m-b0">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <a [routerLink]="subitem.route ? [subitem.route] : []">View All Products</a></p>
							 </div>
							 <div class="sale-countdown">
								<div class="countdown" *ngIf="countdown$ | async as countdown">
								   <div *ngIf="countdown.days" class="date">
									  <span class="time days">{{ countdown.days }}</span>
									  <span class="work-time">Days</span>
								   </div>
								   <div *ngIf="countdown.hours" class="date">
									  <span class="time hours">{{ countdown.hours }}</span>
									  <span class="work-time">Hours</span>
								   </div>
								   <div *ngIf="countdown.minutes" class="date">
									  <span class="time mins">{{ countdown.minutes }}</span>
									  <span class="work-time">Minutess</span>
								   </div>
								   <div *ngIf="countdown.seconds" class="date">
									  <span class="time secs">{{ countdown.seconds }}</span>
									  <span class="work-time">Second</span>
								   </div>
								</div>
							 </div>
						  </li>
					   } @else {
						  <li>
							 <span class="menu-title">{{ subitem.title }}</span>
							 <ul class="list-hover5">
								@for(subSubItem of subitem?.subsubMenu; track subSubItem;){
								<li>
								   <a [routerLink]="subSubItem.route ? [subSubItem.route] : []">
								   <span>{{ subSubItem.title }} </span>
								   @if(subSubItem.subsubMenuBadge){
									  <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
								   }
								   </a>
								</li>
								}
							 </ul>
						  </li>
					   }
					}
					</ul>
				 </li>
				 <li class="side-right">
					<div class="adv-media">
					   <img src="images/posts/large/pic2.png" alt="">
					</div>
				 </li>
			  </ul>
		   </div>
		} @else if(item.type == 'type-3') {
		   <div class="mega-menu menu-media-left">
			  <ul>
				 @for(subitem of item?.subMenu; track subitem;){
				 <li class="{{ subitem.subMenuclass }}">
					<span *ngIf="subitem.title" class="menu-title">{{ subitem.title }}</span>
					<ul class="{{ subitem.subMenuclass == 'side-left'?'portfolio-nav-link':'' }}">
					   @for(subSubItem of subitem?.subsubMenu; track subSubItem;){
					   <li>
						  <a href="javascript:void(0);">
							 <img *ngIf="subSubItem.image" src="{{ subSubItem.image }}" alt="/" class="rounded">
							 <span>{{ subSubItem.title }}</span>
						  </a>
					   </li>
					   }
					</ul>
				 </li>
				 }
			  </ul>
		   </div>
		}
	 }
  </li>
  }
</ul>
						

<ul className="nav navbar-nav">
    {megaMenu4.map(({ label, className, icon, submenu }, index) => (
        <li className={className} key={index}>
            <Link to={"#"}>
            <span>{label}</span>
            <span className={icon}></span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            {!label.includes("Offcanvas") ? (
            <div className="mega-menu">
            {label.includes("Images") && (
            <div className="row g-3">
                {submenu.map(({ img }, index) => (
                <div className="col-md-3 col-6" key={index}>
                    <img className="rounded w-100" src={img} alt="" />
                </div>
                ))}
            </div>
            )}
            {label.includes("Slider") && (
            <Swiper
                className="swiper menu-swiper"
                id="xMenuSwiper"
                slidesPerView={4}
                spaceBetween={30}
                speed={1500}
                loop={true}
                modules={[Navigation, Autoplay, Pagination]}
                navigation={{ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }}
                autoplay={{
                delay: 1500,
                }}
                pagination={{
                el: ".swiper-pagination",
                dynamicBullets: true,
                }}
            >
                {submenu.map(({ img }, inde) => (
                <SwiperSlide key={inde} className="swiper-slide">
                    <img className="rounded w-100" src={img} alt="" />
                </SwiperSlide>
                ))}
                <div className="swiper-pagination m-t30"></div>
                <div className="swiper-button-prev button-black">
                <i className="fa-solid fa-arrow-left"></i>
                </div>
                <div className="swiper-button-next button-black">
                <i className="fa-solid fa-arrow-right"></i>
                </div>
            </Swiper>
            )}
            {label.includes("Accordion") && (
            <Accordion defaultActiveKey="0">
                {submenu.map(({ label }, ind) => (
                <Accordion.Item eventKey={ind} key={ind}>
                    <Accordion.Header>{label}</Accordion.Header>
                    <Accordion.Body>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                    anim id est laborum.
                    </Accordion.Body>
                </Accordion.Item>
                ))}
            </Accordion>
            )}
        </div>
        ) : (
        <ul className="sub-menu list-hover4">
            {submenu.map(({ label }, ind) => (
            <li key={ind}>
                <Link to={"#"}  data-bs-toggle="offcanvas" >
                <span>{label}</span>
                </Link>
            </li>
            ))}
        </ul>
        )}
    </li>
    ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   @if(item.badge.icon){
			  <i class="m-l5 badge-icon {{ item.badge.icon }} text-{{ item.badge.color }}"></i>
		   } @else {
			  <span class="m-l5 badge-blank badge-wave wave-primary bg-{{ item.badge.color }}">{{ item.badge.text }}</span> 
		   }
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
		@if(item.type == 'type-1'){
		   <div class="mega-menu">
			  <div class="row g-3">
				 @for(subitem of item?.subMenu; track subitem;){
				 <div class="col-md-3 col-6"><img class="rounded w-100" src="{{ subitem.image }}" alt=""></div>
				 }
			  </div>
		   </div>
		} @else if(item.type == 'type-2'){
		   <div class="mega-menu">
			  <div class="swiper menu-swiper" id="xMenuSwiper">
				 <div class="swiper-wrapper">
					@for(subitem of item?.subMenu; track subitem;){
					<div class="swiper-slide">
					   <img class="rounded w-100" src="{{ subitem.image }}" alt="">
					</div>
					}                      
				 </div>
				 <div class="swiper-pagination m-t30"></div>
				 <div class="swiper-button-prev button-black"><i class="fa-solid fa-arrow-left"></i></div>
				 <div class="swiper-button-next button-black"><i class="fa-solid fa-arrow-right"></i></div>
			  </div>
		   </div>
		} @else if(item.type == 'type-3'){
		   <div class="mega-menu">
			  <div ngbAccordion [closeOthers]="true">
			  @for(subitem of item?.subMenu; track subitem; let i = $index){
					<div ngbAccordionItem [collapsed]="i !== 0">
					   <h2 ngbAccordionHeader>
						  <button ngbAccordionButton>{{ subitem.title }}</button>
					   </h2>
					   <div ngbAccordionCollapse>
						  <div ngbAccordionBody>
							 <ng-template>
								<div [innerHTML]="subitem.desc"></div>
							 </ng-template>
						  </div>
					   </div>
					</div>
				 }
			  </div>
		   </div>
		} @else if(item.type == 'type-4'){
		   <ul class="sub-menu list-hover4">
			  @for(subitem of item?.subMenu; track subitem;){
				<li>
				  <a href="javascript:void(0);" 
					 (click)="openCanvas(content, subitem.offcanvas?.position )" 
					 [attr.data-hover]="subitem.title">
					<span>{{ subitem.title }}</span>
				  </a>
				  <ng-template #content let-offcanvas>
					@if(subitem.offcanvas?.search){
					   <div class="xmenu-search container py-30 m-auto">
						  <h5 *ngIf="subitem.offcanvas?.canvasTitle" class="offcanvas-title mb-3" id="offcanvasRightLabel">{{ subitem.offcanvas?.canvasTitle }}</h5>
						  <form action="#">
							 <div class="search-group">
								<input name="search" value="" type="text" class="form-control" placeholder="Type to search">
								<button type="button" class="search-btn"><i class="fa fa-search"></i></button>
							 </div>
						  </form>
					   </div>
					} @else {
					<div class="offcanvas-header">
					  <h4 class="offcanvas-title">{{ subitem.offcanvas?.canvasTitle }}</h4>
					  <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
					</div>
					<div class="offcanvas-body">
					   <div [innerHTML]="subitem.offcanvas?.canvasDesc"></div>
					</div>
					}
				  </ng-template>
				</li>
			  }
		   </ul>
		}
	 } 
  </li>
  }
</ul>
						

<ul className="nav navbar-nav">
	{megaMenu5.map(({ className, label, icon, submenu }, index) => (
	<li className={\`\${className} \${dropdown == index ? "open" : ""}\`} key={index}>
		<Link to={"#"} onClick={() => dropdownHandler(index)}>
		<span>{label}</span>
		<i className={icon}></i>
		<i className="fas fa-chevron-down tabindex"></i>
		</Link>
		<div className="mega-menu">
		<ul>
			{submenu.map(({ label, child, blog }: any, inde) => (
			<li key={inde}>
				<span className="menu-title">{label}</span>
				<ul className="list-hover3">
				{!blog &&
					child.map(({ label }: any, ind: number) => (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>
						</Link>
					</li>
					))}
				{blog &&
					blog?.map(({ child, children }: any, ind: number) => (
					<>
						<li key={ind}>
						<span className="menu-title">{child}</span>
						<ul className="list-hover1">
							{children.map(({ label }: any) => (
							<li>
								<Link to={"#"}>{label}</Link>
							</li>
							))}
						</ul>
						</li>
					</>
					))}
				</ul>
			</li>
			))}
		</ul>
		</div>
	</li>
	))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
	 <li class="has-mega-menu sub-menu-down auto-width {{ item.class }}">
		<a [routerLink]="item.route ? [item.route] : []">
		   <span>{{ item.title }}</span>
		   @if(item.badge){
			  @if(item.badge.icon){
				 <i class="{{ item.badge.icon }} ms-2 badge-icon badge-zoom d-inline-block text-{{ item.badge.color }}"></i>
			  } @else {
				 <span class="m-l5 badge-blank badge-wave wave-primary bg-{{ item.badge.color }}">{{ item.badge.text }}</span> 
			  }
		   }
		   @if(item.subMenu){
			  <i class="fas fa-chevron-down tabindex"></i>
		   }
		</a>
		@if(item.subMenu){
		<div class="mega-menu">
		   <ul>
			  @for(subitem of item?.subMenu; track subitem;){
			  <li>
				 <span class="menu-title">{{ subitem.title }}</span>
				 <ul class="list-hover3">
					@for(subSubItem of subitem?.subsubMenu; track subSubItem;){
					<li>
					   <a [routerLink]="subSubItem.route ? [subSubItem.route] : []">
						  <span>{{ subSubItem.title }}</span>
						  @if(subSubItem.subsubMenuBadge){
							 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
						  }
					   </a>
					</li>
					}
				 </ul>
				 @if(subitem.subsubMenu2){
					<span class="menu-title">{{ subitem.title2 }}</span>
					<ul class="list-hover3">
					   @for(subSubItem2 of subitem?.subsubMenu2; track subSubItem2;){
					   <li>
						  <a [routerLink]="subSubItem2.route">
							 <span>{{ subSubItem2.title }}</span>
							 @if(subSubItem2.subsubMenuBadge){
								<span class="badge rounded bg-{{ subSubItem2.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem2.subsubMenuBadge.text }}</span>
							 }
						  </a>
					   </li>
					   }
					</ul>
				 }  
			  </li>
			  }
		   </ul>
		</div>
		}
	 </li>
  }
</ul>
						

<ul className="nav navbar-nav">
  {[1, 2, 3, 4, 5, 6].map((el, index) => (
    <li key={index}>
      <Link to={"#"}>
        <span>Nav {el}</span>
        <span
          className={\`badge-blank m-l5 \${
            index == 2 ? "bg-info" : 
            index == 0 ? "bg-primary" : 
            index == 4 ? "bg-danger" : ""
          }\`}
        ></span>
      </Link>
    </li>
  ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li>
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   @if(item.badge.icon){
			  <i class="{{ item.badge.icon }} ms-2 badge-icon badge-zoom d-inline-block text-{{ item.badge.color }}"></i>
		   } @else {
			  <span class="badge-blank m-l5 bg-{{ item.badge.color }}"></span> 
		   }
		}
	 </a>
  </li>
  }
</ul>