anwisystems/dist/js/navbar.js

navINIT();

function navINIT() {
  async function getAllProdouctsIds() {
    let res = await API_SERVICES_ACTIONS.getAPIService(
      "apis/v4/bizgaze/integrations/products/getallproducts",
      true
    );
    if (res.isError) {
      console.log(res.errorMsg);
      return;
    }

    res = JSON.parse(res.response.result);

    for (let i = 0; i < res.length; i++) {
      let curr = res[i];
      let productname = curr.productname;
      let id = curr.productid;

      // ACCESSORIES
      switch (productname) {
        case "Zeno Sleekbook":
          appendIdNav("zenosleekbook", id);
          break;
        case "Zeno Dualbook":
          appendIdNav("zenodualbook", id);
          break;
        case "FYRO Flagship":
          appendIdNav("fyroflagship", id);
          break;
        case "AIO Fyro":
          // appendIdNav('fyroaio',id);
          break;
        case "AIO Zeno":
        // appendIdNav('zenoaio',id);
        default:
          break;
      }
    }
  }

  function appendIdNav(className, id) {
    let html = $(`.${className}`).attr("href");
    const pattern = /{[^}]+}/g;
    const replacedString = html.replace(pattern, id);
    $(`.${className}`).parents(".nav-tab-show").removeClass("d-none");
    $(`.${className}`).attr("href", replacedString);
  }

  if (
    !window.location.href.includes("orderconfirmation") &&
    !window.location.href.includes("/w/")
  ) {
    loadCart();
  }

  function loadHelper(src = "./dist/js/utils/helpers.js") {
    if ($(`script[src="${src}"]`).length > 0) {
      return new Promise((resolve) => resolve());
    }
    return new Promise(function (resolve, reject) {
      var s;
      s = document.createElement("script");
      s.src = src;
      s.onload = resolve;
      s.onerror = reject;
      document.head.appendChild(s);
    });
  }
  async function loadCart() {
    if (!window.location.href.includes("services/paymentmethod.html")) {
      let files = ["./dist/js/shoppingcart/addtocart.js"];
      await loadHelper();
      for (let i = 0; i < files.length; i++) {
        if ($(`script[src="${files[i]}"]`).length > 0) {
          continue;
        }
        try {
          await loadHelper(files[i]);
        } catch (error) {
          console.log(error);
          return;
        }
      }
    }

    setLengthCart();
    getAllProdouctsIds();
  }
  let URLNAMENAV = window.location.href;
  const isTransparent =
    URLNAMENAV.includes("login") ||
    URLNAMENAV.includes("orderconfirmation") ||
    URLNAMENAV.includes("services/paymentmethod.html");
  let nav_html = `
<header class="header-area section-padding-1 transparent-bar" ${
    isTransparent ? 'style="background:#fff"' : ""
  }>
            <div class="header-large-device">
                <div class="header-bottom sticky-bar">
                    <div class="container-lg">
                        <div class="header-bottom-flex">
                            <div class="logo-menu-wrap d-flex gap-5">
                                <div class="logo">
                                    <a href="../index.html">
                                        <img src="/dist/assets/imgs/anwi-logo-1.png" alt="logo" class="nav_logo">
                                    </a>
                                </div>
                                <div class="main-menu menu-lh-1 main-menu-padding-1">
                                    <nav>
                                        <ul class="mb-0 p-0">
                                        <li class="hover_tab_1">
                                            <a href="/laptops.html" class="satoshi_font flex items-center">LAPTOPS
                                                <svg style="width:18px;height:15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill="#000" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
                                                </svg>
                                            </a>
                                        <ul class="pb-3" style="list-style:none">
                                            <li>
                                                <div class="d-flex gap-5 pt-5 pb-4 align-items-center justify-content-center">
                                                    <div class="position-relative nav-tab-show bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 d-none notes cursor-pointer">
                                                        <a class="h-100 nav_items zenosleekbook" href="/laptopdetails.html?Zeno#productId={106633230000029}">
                                                            <div  style="" class="align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                                <img src="https://assets.bizgaze.com/_files/documents/663/e7b635fd-2247-4691-9492-108889b17930/14%20inch.png" alt="ora img" class="nav_imgs success-img"/>
                                                                <p  class="mb-0 text-center text-dark w-100 fw-500">Zeno Sleekbook </p>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="position-relative nav-tab-show bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 d-none notes cursor-pointer">
                                                        <a class="h-100 nav_items fyroflagship" href="/laptopdetails.html?Fyro#productId={106633230000031}">
                                                            <div  style="" class=" align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                                <img src="https://assets.bizgaze.com/_files/documents/663/c7ff1466-6274-48a4-abfd-aba94ad9d56f/17 inches.png" alt="ora img" class="nav_imgs success-img"/>
                                                                <p  class="mb-0 text-center text-dark w-100 fw-500">Fyro Flagship </p>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="position-relative nav-tab-show bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 notes cursor-pointer d-none">
                                                    <a class="h-100 nav_items zenodualbook" href="/laptopdetails.html?Zeno#productId={106633230000030}">
                                                        <div  style="" class=" align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                            <img src="https://assets.bizgaze.com/_files/documents/663/74040488-b018-48bb-8dbc-d3d2a3ab0576/zeno-dual-book.png" alt="ora img" class="nav_imgs success-img"/>
                                                            <p  class="mb-0 text-center text-dark w-100 fw-500">Zeno Dual Book </p>
                                                        </div>
                                                    </a>
                                                </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="hover_tab_2">
                                        <a href="/allinones.html" class="satoshi_font flex items-center">ALL IN ONES
                                            <svg style="width:18px;height:15px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="#000" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
                                            </svg>
                                        </a>
                                    <ul class="pb-3" style="list-style:none">
                                        <li>
                                            <div class="d-flex gap-5 pt-5 pb-4 align-items-center justify-content-center">
                                                <div class="position-relative nav-tab-show bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 notes cursor-pointer">
                                                    <a class="h-100 nav_items zenoaio" href="/laptopdetails.html?AIO Zeno#productId=106633230000026#itemid=106633240000112">
                                                        <div  style="" class="align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                            <img src="https://assets.bizgaze.com/_files/documents/663/801719ca-c57b-4652-8ab9-37e7dcaab746/aio-removebg-preview.png" alt="ora img" class="nav_imgs success-img"/>
                                                            <p  class="mb-0 text-center text-dark w-100 fw-500">Zeno All in ones</p>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="position-relative  nav-tab-show bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 notes cursor-pointer">
                                                    <a class="h-100 nav_items" href="/laptopdetails.html?AIO Fyro#productId=106633230000027#itemid=106633240000126">
                                                        <div  style="" class=" align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                            <img src="https://assets.bizgaze.com/_files/documents/663/abfaa5a3-339a-4bf8-ade2-f6928bfae04b/Asset 4@2x.png" alt="ora img" class="nav_imgs success-img"/>
                                                            <p  class="mb-0 text-center text-dark w-100 fw-500">Fyro All in ones </p>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </li>
                                    <li class="hover_tab_2">
                                        <a href="/accessories.html" class="satoshi_font flex items-center">ACCESSORIES
                                            <svg style="width:18px;height:15px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="#000" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
                                            </svg>
                                        </a>
                                        <ul class="pb-3" style="list-style:none">
                                        <li>
                                            <div class="d-flex gap-5 pt-5 pb-4 align-items-center justify-content-center">
                                                <div class="position-relative bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4  nav-tab-show_acc notes cursor-pointer">
                                                    <a class="h-100 nav_items" href="/storageproducts.html">
                                                        <div  style="" class="align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                            <img src="https://assets.bizgaze.com/_files/documents/663/eb608765-7b0a-4ed0-92f7-6afbd2a2ee98/Ora4 SSD 2TB copy.png" alt="ora img" class="nav_imgs success-img"/>
                                                            <p  class="mb-0 text-center text-dark w-100 fw-500">Storage</p>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="position-relative bg-gray-3 rounded-2 px-md-5 pt-md-5 pb-md-4 nav-tab-show_acc notes cursor-pointer">
                                                    <a class="h-100 nav_items" href="/ramproducts.html">
                                                        <div  style="" class=" align-items-center cursor-pointer d-flex gap-5 flex-column h-100 justify-content-center rounded-3">
                                                            <img src="https://assets.bizgaze.com/_files/documents/663/aca8b4eb-23c8-4751-8096-694c12b46133/Laptop DDR5 8GB.png" alt="ora img" class="nav_imgs success-img"/>
                                                            <p  class="mb-0 text-center text-dark w-100 fw-500">Memory </p>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </li>
                                    <!-- 
                                    <li><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
                                    <li><a href="./ramproducts.html" class="satoshi_font">MEMORY</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="/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="/myaccount.html" class="my_avatar cursor-pointer">
                                <svg class="user-icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0)">
                                        <path d="M21.4443 24.3665H19.4443V19.3235C19.4435 18.5395 19.1317 17.7879 18.5774 17.2335C18.023 16.6791 17.2713 16.3673 16.4873 16.3665H8.40134C7.61733 16.3673 6.86567 16.6791 6.3113 17.2335C5.75693 17.7879 5.44513 18.5395 5.44434 19.3235V24.3665H3.44434V19.3235C3.44592 18.0093 3.96869 16.7494 4.89796 15.8201C5.82723 14.8909 7.08714 14.3681 8.40134 14.3665H16.4873C17.8015 14.3681 19.0614 14.8909 19.9907 15.8201C20.92 16.7494 21.4427 18.0093 21.4443 19.3235V24.3665Z" fill="#000"/>
                                        <path d="M12.4443 12.3665C11.2577 12.3665 10.0976 12.0146 9.11092 11.3553C8.12422 10.696 7.35519 9.75898 6.90106 8.66262C6.44694 7.56626 6.32812 6.35986 6.55963 5.19598C6.79114 4.03209 7.36258 2.96299 8.2017 2.12388C9.04081 1.28476 10.1099 0.713318 11.2738 0.481807C12.4377 0.250296 13.6441 0.369116 14.7404 0.823242C15.8368 1.27737 16.7739 2.0464 17.4332 3.0331C18.0924 4.01979 18.4443 5.17983 18.4443 6.36652C18.4427 7.95733 17.8101 9.48253 16.6852 10.6074C15.5604 11.7323 14.0352 12.3649 12.4443 12.3665ZM12.4443 2.36652C11.6532 2.36652 10.8799 2.60111 10.2221 3.04064C9.56426 3.48017 9.05157 4.10488 8.74882 4.83579C8.44607 5.56669 8.36686 6.37096 8.5212 7.14688C8.67554 7.9228 9.0565 8.63554 9.61591 9.19495C10.1753 9.75436 10.8881 10.1353 11.664 10.2897C12.4399 10.444 13.2442 10.3648 13.9751 10.062C14.706 9.75929 15.3307 9.2466 15.7702 8.5888C16.2097 7.931 16.4443 7.15764 16.4443 6.36652C16.4443 5.30565 16.0229 4.28824 15.2728 3.53809C14.5226 2.78795 13.5052 2.36652 12.4443 2.36652Z" fill="#000"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0">
                                            <rect width="24" height="24" fill="white" transform="translate(0.444336 0.366516)"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                                </a>
                                </div>
                                <div class="same-style header-cart">
                                <a class="cart-active1 position-relative cursor-pointer" href="/shopping-cart.html">
                                <svg class="cart_icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0)">
                                        <path d="M24.4941 3.36652H4.73614L4.69414 3.01552C4.60819 2.28593 4.25753 1.61325 3.70863 1.12499C3.15974 0.636739 2.45077 0.366858 1.71614 0.366516L0.494141 0.366516V2.36652H1.71614C1.96107 2.36655 2.19748 2.45647 2.38051 2.61923C2.56355 2.78199 2.68048 3.00626 2.70914 3.24952L4.29414 16.7175C4.38009 17.4471 4.73076 18.1198 5.27965 18.608C5.82855 19.0963 6.53751 19.3662 7.27214 19.3665H20.4941V17.3665H7.27214C7.02705 17.3665 6.79052 17.2764 6.60747 17.1134C6.42441 16.9505 6.30757 16.7259 6.27914 16.4825L6.14814 15.3665H22.3301L24.4941 3.36652ZM20.6581 13.3665H5.91314L4.97214 5.36652H22.1011L20.6581 13.3665Z" fill="#000"/>
                                        <path d="M7.49414 24.3665C8.59871 24.3665 9.49414 23.4711 9.49414 22.3665C9.49414 21.2619 8.59871 20.3665 7.49414 20.3665C6.38957 20.3665 5.49414 21.2619 5.49414 22.3665C5.49414 23.4711 6.38957 24.3665 7.49414 24.3665Z" fill="#000"/>
                                        <path d="M17.4941 24.3665C18.5987 24.3665 19.4941 23.4711 19.4941 22.3665C19.4941 21.2619 18.5987 20.3665 17.4941 20.3665C16.3896 20.3665 15.4941 21.2619 15.4941 22.3665C15.4941 23.4711 16.3896 24.3665 17.4941 24.3665Z" fill="#000"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0">
                                            <rect width="24" height="24" fill="white" transform="translate(0.494141 0.366516)"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span class="position-absolute cartnumcount d-none" >0</span>
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sub_nav_container d-none border-top" style="
                box-shadow: 0 6PX 16PX 0 #1919190f;
                -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(6px);margin-top:65px;">
                <div class="container">
                    <div class="d-flex justify-content-between">
                   <span class="d-flex align-items-center font-weight-600">
                   <h2 class="titleproductnav sub_nav_item me-3 fs-9"></h2></span>
                        <ul class="d-flex mb-0 py-3  justify-content-center align-items-center" style="list-style:none;">
                            <li>
                                <a data-overview="#${
                                  window.location.href.includes("Zeno")
                                    ? "overview_data_zeno"
                                    : "overview_data_fyro"
                                }" href="#home-main-container" class="sub_nav_item overview me-3 fs-9">Overview</a>
                            </li>
                            <li>
                                <a data-spec="true" class="sub_nav_item me-3 fs-9 overviewspecs">Specifications</a>
                            </li>
                            <li>
                                <a href="#"  class="font-12p btn btn-dark sub_nav_item text-white">Buy now</a>
                            </li>
                        </ul>
                    </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 px-4">
                    <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="/myaccount.html" class="my_avatar">
                                    <svg class="user-icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" data-di-res-id="e576e1a9-2f4a9ed6" data-di-rand="1682677695656">
                                    <g clip-path="url(#clip0)">
                                        <path d="M21.4443 24.3665H19.4443V19.3235C19.4435 18.5395 19.1317 17.7879 18.5774 17.2335C18.023 16.6791 17.2713 16.3673 16.4873 16.3665H8.40134C7.61733 16.3673 6.86567 16.6791 6.3113 17.2335C5.75693 17.7879 5.44513 18.5395 5.44434 19.3235V24.3665H3.44434V19.3235C3.44592 18.0093 3.96869 16.7494 4.89796 15.8201C5.82723 14.8909 7.08714 14.3681 8.40134 14.3665H16.4873C17.8015 14.3681 19.0614 14.8909 19.9907 15.8201C20.92 16.7494 21.4427 18.0093 21.4443 19.3235V24.3665Z" fill="#fff"/>
                                        <path d="M12.4443 12.3665C11.2577 12.3665 10.0976 12.0146 9.11092 11.3553C8.12422 10.696 7.35519 9.75898 6.90106 8.66262C6.44694 7.56626 6.32812 6.35986 6.55963 5.19598C6.79114 4.03209 7.36258 2.96299 8.2017 2.12388C9.04081 1.28476 10.1099 0.713318 11.2738 0.481807C12.4377 0.250296 13.6441 0.369116 14.7404 0.823242C15.8368 1.27737 16.7739 2.0464 17.4332 3.0331C18.0924 4.01979 18.4443 5.17983 18.4443 6.36652C18.4427 7.95733 17.8101 9.48253 16.6852 10.6074C15.5604 11.7323 14.0352 12.3649 12.4443 12.3665ZM12.4443 2.36652C11.6532 2.36652 10.8799 2.60111 10.2221 3.04064C9.56426 3.48017 9.05157 4.10488 8.74882 4.83579C8.44607 5.56669 8.36686 6.37096 8.5212 7.14688C8.67554 7.9228 9.0565 8.63554 9.61591 9.19495C10.1753 9.75436 10.8881 10.1353 11.664 10.2897C12.4399 10.444 13.2442 10.3648 13.9751 10.062C14.706 9.75929 15.3307 9.2466 15.7702 8.5888C16.2097 7.931 16.4443 7.15764 16.4443 6.36652C16.4443 5.30565 16.0229 4.28824 15.2728 3.53809C14.5226 2.78795 13.5052 2.36652 12.4443 2.36652Z" fill="#fff"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0">
                                            <rect width="24" height="24" fill="white" transform="translate(0.444336 0.366516)"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                                </a>
                                </div>
                                <div class="same-style header-cart ms-3">
                                <a class="cart-active1 position-relative" href="/shopping-cart.html">
                                <svg class="cart_icon icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" data-di-res-id="e576e1a9-90f52cd9" data-di-rand="1682677695656">
                                    <g clip-path="url(#clip0)">
                                        <path d="M24.4941 3.36652H4.73614L4.69414 3.01552C4.60819 2.28593 4.25753 1.61325 3.70863 1.12499C3.15974 0.636739 2.45077 0.366858 1.71614 0.366516L0.494141 0.366516V2.36652H1.71614C1.96107 2.36655 2.19748 2.45647 2.38051 2.61923C2.56355 2.78199 2.68048 3.00626 2.70914 3.24952L4.29414 16.7175C4.38009 17.4471 4.73076 18.1198 5.27965 18.608C5.82855 19.0963 6.53751 19.3662 7.27214 19.3665H20.4941V17.3665H7.27214C7.02705 17.3665 6.79052 17.2764 6.60747 17.1134C6.42441 16.9505 6.30757 16.7259 6.27914 16.4825L6.14814 15.3665H22.3301L24.4941 3.36652ZM20.6581 13.3665H5.91314L4.97214 5.36652H22.1011L20.6581 13.3665Z" fill="#fff"/>
                                        <path d="M7.49414 24.3665C8.59871 24.3665 9.49414 23.4711 9.49414 22.3665C9.49414 21.2619 8.59871 20.3665 7.49414 20.3665C6.38957 20.3665 5.49414 21.2619 5.49414 22.3665C5.49414 23.4711 6.38957 24.3665 7.49414 24.3665Z" fill="#fff"/>
                                        <path d="M17.4941 24.3665C18.5987 24.3665 19.4941 23.4711 19.4941 22.3665C19.4941 21.2619 18.5987 20.3665 17.4941 20.3665C16.3896 20.3665 15.4941 21.2619 15.4941 22.3665C15.4941 23.4711 16.3896 24.3665 17.4941 24.3665Z" fill="#fff"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0">
                                            <rect width="24" height="24" fill="white" transform="translate(0.494141 0.366516)"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span class="position-absolute cartnumcount d-none"  style="top:-27%;right:-80%">0</span>
                                </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="expandlinav">
                                <div class="d-flex justify-content-between explandlinavnameparent">
                                    <span class="explandlinavname">LAPTOP</span><span data-name="laptops.html" class=" viewall_li">+</span>
                                </div>
                               <div class="content-expandlinav pt-2 d-none">
                               <a class="h-100 p-1 zenosleekbook" href="/laptopdetails.html?Zeno#productId={106633230000029}">
                                    <div class="ps-2">
                                    Zeno Sleekbook
                                    </div>
                                </a>
                                <a class="h-100 p-1 fyroflagship" href="/laptopdetails.html?Fyro#productId={106633230000031}">
                                    <div class="ps-2">Fyro Flagship  </div>
                                    </a>
                                    <a class="h-100 p-1 zenodualbook" href="/laptopdetails.html?Zeno#productId={106633230000030}">
                                    <div class="ps-2">Zeno Dual Book   </div>
                                    </a>
                               </div>
                                </li>
                                <li class="expandlinav">
                                <div class="d-flex justify-content-between explandlinavnameparent">
                                    <span class="explandlinavname">ALL IN ONES </span><span  data-name="allinones.html" class="viewall_li">+</span>
                                </div>
                               <div class="content-expandlinav pt-2 d-none">
                               <a class="h-100 p-1" href="/laptopdetails.html?AIO Zeno#productId=106633230000026#itemid=106633240000112">
                                    <div class="ps-2">
                                    Zeno All In One
                                    </div>
                                    </a>
                                    <a class="h-100 p-1" href="/laptopdetails.html?AIO Fyro#productId=106633230000027#itemid=106633240000126">
                                    <div class="ps-2">
                                    Fyro All iIn One
                                    </div>
                                    </a>
                               </div>
                                </li>
                                <li class="expandlinav">
                                 <div class="d-flex justify-content-between explandlinavnameparent">
                                   <span class="explandlinavname">ACCESSORIES </span><span  data-name="allinones.html" class="viewall_li">+</span>
                                  </div>
                                     <div class="content-expandlinav pt-2 d-none">
                                    <a class="h-100 p-1" href="/storageproducts.html">
                                     <div class="ps-2">
                                      Storage
                                     </div>
                                      </a>
                                   <a class="h-100 p-1" href="/ramproducts.html">
                                  <div class="ps-2">
                                   Memory
                                   </div>
                                  </a>
                                 </div>
                                 </li>
                                 <!-- 
                                 <li class=""><a href="/ramproducts.html" class="satoshi_font">MEMORY</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="/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);

  $(".explandlinavnameparent").click(function (e) {
    let parentElement = $(e.target).parents(".expandlinav");
    if ($(parentElement).find(".content-expandlinav").hasClass("d-none")) {
      const name = $(parentElement).find(".viewall_li").data("name");
      $(parentElement)
        .find(".viewall_li")
        .html(`<a href="${name}">view all</a>`);
      $(parentElement).find(".content-expandlinav").removeClass("d-none");
    } else {
      $(parentElement).find(".viewall_li").html("+");
      $(parentElement).find(".content-expandlinav").addClass("d-none");
    }
  });

  let width = $(window).width();
  if (width <= 576) {
    $(".success-img.left-block").attr({ width: "250px", height: "250px" });
    $(".product_item").addClass("flex-column");
  }
  $(".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(".logo 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 > 2300) {
      $(".main-body").find("iframe").attr({
        width: width,
        height: 1440,
      });
    } else if (width <= 2300 && width > 1921) {
      $(".main-body").find("iframe").attr({
        width: width,
        height: 1132,
      });
    } else if (width <= 1920 && width > 1620) {
      $(".main-body").find("iframe").attr({
        width: width,
        height: 1083,
      });
    } else {
      $(".main-body").find("iframe").attr({
        width: width,
        height: 861,
      });
    }
  }

  $("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");
  }
  let loc_path1 = "/productcatloguedetails.html";
  if (window.location.pathname.includes(loc_path1) === false) {
    localStorage.removeItem("product_catlogue_obj");
  }

  //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";
  let $about_pg = $("body").hasClass("about_page");
  if ($about_pg == true) {
    $(".main-menu").find("nav ul li a").addClass("text-dark");
    let img_src = `./dist/assets/imgs/anwi-logo-1.png`;
    $(".logo-menu-wrap").find(".logo a img").attr("src", img_src);
    $(".header-bottom").addClass("sticky-bar stick");
    $("body.about_page")
      .find(".header-large-device")
      .find(".header-action-wrap")
      .find(".same-style")
      .find("svg")
      .find("path")
      .attr("fill", "#000");
  }
  let $body_nav = $("body").attr("class");
  if (
    $body_nav === "support_pg" ||
    $body_nav === "media_page" ||
    $body_nav === "meter_pg"
  ) {
    $(".main-menu").find("nav ul li a").addClass("text-dark");
    let img_src = `./dist/assets/imgs/anwi-logo-1.png`;
    $(".logo-menu-wrap").find(".logo a img").attr("src", img_src);
    $(".same-style").find("svg path").attr("fill", "#000");
  }
  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(".logo a img").attr("src", $nav_img);
    $("body.services_page")
      .find(".header-large-device")
      .find(".header-action-wrap")
      .find(".same-style")
      .find("svg")
      .find("path")
      .attr("fill", "#000");
    $(".main-menu")
      .find("nav ul")
      .find("li a")
      .each(function () {
        $(this).addClass("text-dark");
        $(".header-bottom").addClass("sticky-bar stick");
        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);
        }
      });
    $(".tab-content")
      .find("img")
      .each(function () {
        let $img_src = $(this).attr("src");
        let $img_src1 = $img_src.includes("./");
        if ($img_src1 === true) {
          let $refarenceimg1 = `.${$img_src}`;
          $(this).attr("src", $refarenceimg1);
        }
      });
    $(".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);
        }
      });
  }

  setTimeout(() => {
    if (width <= 600) {
      $(".same-style").find("svg path").attr("fill", "#000");
    }
  }, 300);

  // overview

  $(".overview").click(function (e) {
    let name = $(e.target).data("overview");

    document.querySelector(name)?.scrollIntoView({
      behavior: "smooth",
    });
  });

  $(".overviewspecs").click(function (e) {
    document.querySelector("#specification_data")?.scrollIntoView({
      behavior: "smooth",
    });
  });
}