anwi_website/dist/Js/navbar.js

let nav_html = `
<header class="header-area section-padding-1 transparent-bar bg-white">
            <div class="header-large-device">
                <div class="header-bottom sticky-bar">
                    <div class="container">
                        <div class="header-bottom-flex">
                            <div class="logo-menu-wrap d-flex">
                                <div class="logo">
                                    <a href="index.html">
                                        <img src="./dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50">
                                    </a>
                                </div>
                                <div class="main-menu menu-lh-1 main-menu-padding-1">
                                    <nav>
                                        <ul class="mb-0 p-0">
                                            <li><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
                                            <li><a href="./ramproducts.html" class="satoshi_font">RAM</a></li>
                                            <li><a href="./support.html" class="satoshi_font">SUPPORT</a></li>
                                            <li><a href="./press.html" class="satoshi_font">PRESS</a></li>
                                            <li><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
                                            <li><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
                                            <li class="d-none"><a href="#" class="satoshi_font product_data" item_id="106633220000002">ACCESSORIES</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
                                <div class="same-style">
                                    <a href="#"><i class="fa-solid fa-user"></i></a>
                                </div>
                                <div class="same-style header-cart">
                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-small-device header-small-ptb sticky-bar py-md-2 py-2 bg-white">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-6 header-action-wrap">
                            <div class="d-flex">
                                <div class="same-style header-info">
                                    <button class="mobile-menu-button-active">
                                        <span class="info-width-1"></span>
                                        <span class="info-width-2"></span>
                                        <span class="info-width-3"></span>
                                    </button>
                                </div>
                                <div class="mobile-logo mobile-logo-width ps-3">
                                    <a href="index.html">
                                        <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-50">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="header-action-wrap header-action-flex header-action-mrg-1">
                                <div class="same-style">
                                    <a href="#"><i class="fa-solid fa-user"></i></a>
                                </div>
                                <div class="same-style header-cart">
                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Mobile menu start -->
        <div class="mobile-menu-active clickalbe-sidebar-wrapper-style-1">
            <div class="clickalbe-sidebar-wrap">
            <div class="row pb-2 border-bottom">
                <div class="col-6">
                    <div class="mobile-logo mobile-logo-width">
                        <a href="index.html">
                            <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-75">
                        </a>
                    </div>
                </div>
                <div class="col-6 text-end pe-4">
                    <a class="sidebar-close"><i class="fa-solid fa-xmark"></i></a>
                </div>
            </div>
               
                <div class="mobile-menu-content-area sidebar-content-100-percent pt-3">
                    <div class="mobile-search d-none">
                        <form class="search-form" action="#">
                            <input type="text" placeholder="Search here…" class="satoshi_font">
                            <button class="button-search"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </form>
                    </div>
                    <div class="clickable-mainmenu-wrap clickable-mainmenu-style1">
                        <nav>
                            <ul class="pl-0">
                                <li class=""><a href="./ramproducts.html" class="satoshi_font">RAM</a></li>
                                <li class=""><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
                                <li class=""><a href="./support.html" class="satoshi_font" >SUPPORT</a></li>
                                <li class=""><a href="./press.html" class="satoshi_font">PRESS</a></li>
                                <li class=""><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
                                <li class=""><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="mobile-curr-lang-wrap d-none">
                        <div class="single-mobile-curr-lang">
                            <a class="mobile-language-active" href="#">Language <i class="icofont-simple-down"></i></a>
                            <div class="lang-curr-dropdown lang-dropdown-active">
                                <ul>
                                    <li><a href="#">English</a></li>
                                    <li><a href="#">Spanish</a></li>
                                    <li><a href="#">Hindi </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="aside-contact-info d-none">
                        <ul>
                            <li><i class="icofont-clock-time"></i>Monday - Friday: 9:00 - 19:00</li>
                            <li><i class="icofont-envelope"></i>Info@example.com</li>
                            <li><i class="icofont-stock-mobile"></i>(+55) 254. 254. 254</li>
                            <li><i class="icofont-home"></i>Helios Tower 75 Tam Trinh Hoang - Ha Noi - Viet Nam</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>`;
$("#navbar-head").html(nav_html);
let width = $(window).width();
$(".menu-negative-mrg2,.menu-negative-mrg3,.menu-negative-mrg4").css("width",width);
 let ele_page = $("body").hasClass("product_pg");
 if(ele_page == true){
   $(".header-area").removeClass("bg-white");
   $(".main-menu").find("nav ul li a").addClass("text-white");
   $(".header-bottom.sticky-bar").removeClass("sticky-bar");
   let src =`./dist/assets/imgs/anwi-logo-2.png`;
    $(".logo-menu-wrap").find("a img").attr("src",src);
    $(".main-body").find("iframe").attr("width",width);
    if (width <= 575 && width >= 390) {
       $(".main-body").find("iframe").attr({
          width: width,
          height: 236,
        })
      } else if(width <= 390 && width >= 270){
       $(".main-body").find("iframe").attr({
          width: width,
          height: 210,
        });
      } else if (width <= 998 && width > 575) {
       $(".main-body").find("iframe").attr({
          width: width,
          height: 530,
        });
      } else if(width <= 2720 && width > 1920){
        $(".main-body").find("iframe").attr({
            width: width,
            height: 1440,
          });
      }else {
       $(".main-body").find("iframe").attr({
          width: width,
          height: 969,
        });
      }
 }


$("a.ram_data").click(function () {
    let item_id = $(this).attr("accessories_id");
    let loc_path = '/products.html'
    if (window.location.pathname.includes(loc_path)) {
        window.location.href = `?itemid=${item_id}`
    }
    else {
        window.location.href = `/products.html#itemid=${item_id}`;
    }
})


$(".main-menu nav ul").find("li").each(function(){
    var current = window.location.pathname;
    var $this = $(this).find("a");
    if(current != "/"){
        if($this.attr('href').indexOf(current) !== -1){
            $(this).addClass('active_nav');
        }
    }
    
})

// destroy localstorage data
let loc_path = '/productdetails.html';
if (window.location.pathname.includes(loc_path) === false) {
    localStorage.removeItem("product_data");
    localStorage.removeItem("top_data")
}


//services pages links and sources

let $body_pg = $("body").hasClass("services_page");
let $hm_pg = "../index.html";
let $nav_img ="../dist/assets/imgs/anwi-logo-1.png";
let $footer_img = "../dist/assets/imgs/anwi-logo-2.png";
let $scrool_top_img = "../dist/assets/imgs/Home/rocket-footer.png";

if($body_pg == true){
$(".header-large-device").find(".logo-menu-wrap .logo").find("a").attr("href",$hm_pg);
$(".header-large-device").find(".logo-menu-wrap .logo").find("a img").attr("src",$nav_img);
$(".mobile-logo").find("a").attr("href",$hm_pg);
$(".mobile-logo").find("a img").attr("src",$nav_img);
    $(".main-menu").find("nav ul").find("li a").each(function(){
        let $arc = $(this).attr("href");
        let $spcial_char = $arc.includes("./");
        if($spcial_char === true){
            let $refarence = `.${$arc}`
            $(this).attr("href",$refarence);
        }
        $(".same-style").find("a").each(function(){
            let $arc1 = $(this).attr("href");
            let $spcial_char1 = $arc1.includes("./");
            if($spcial_char1 === true){
                let $refarence1 = `.${$arc1}`
                $(this).attr("href",$refarence1);
            }
        })
    });
    $(".clickable-mainmenu-wrap").find("nav ul").find("li a").each(function(){
        let $arc_mbil = $(this).attr("href");
        let $spcial_char_mbil = $arc_mbil.includes("./");
        if($spcial_char_mbil === true){
            let $refarence_mbil = `.${$arc_mbil}`
            $(this).attr("href",$refarence_mbil);
        }
    });
}