anwisystems/enterprise/assets/js/navbar2.js

$(document).ready(function () {
  let navbarHtml = `
    <!-- offcanvas-overlay start -->
    <div class="offcanvas-overlay"></div>
    <!-- offcanvas-overlay end -->
    <!-- offcanvas-mobile-menu start -->
    <div id="offcanvas-mobile-menu" class="offcanvas theme1 offcanvas-mobile-menu ">
      <div class="inner">
        <div class="d-flex ">
          <div class="inner-img d-flex ml-15">
            <img src="./assets/img/logo/logo-black.png" class="img-fluid " alt="anwi-logo">
          </div>
          <div class=" pt-3 pr-10 ms-auto ">
            <button class="offcanvas-close">×</button>
          </div>
        </div>
        <nav class="offcanvas-menu">
          <ul>
            <li class="home-text">
              <a class="home-text1" href="index.html"><span class="menu-text ">Home</span></a>
            </li>
            <li class="shop-text">
              <a  class="shop-text1" href="products.html"><span class="menu-text">Products</span></a>
              <ul class="offcanvas-submenu">
              <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Servers</span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="surpass3u.html"><span class="menu-text">American Pass</span></a>
              </li>
              <li>
                <a href="surpass2u.html"><span class="menu-text">Coyote Pass</span></a>
              </li>
              <li>
                <a href="surpass1u.html"><span class="menu-text">North Pass</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
          <a  class="shop-text1" ><span class="menu-text">Storage</span></a>
          <ul class="offcanvas-submenu">
            <li>
              <a href="24-bay-storage.html"><span class="menu-text">24 Bay Storage</span></a>
            </li>
          </ul>
        </li>
          <li>
            <a href="network-switches.html"><span class="menu-text">Network Switches</span></a>
            <ul class="offcanvas-submenu">
              <li><a href="400g-data.html">400G</a></li>
              <li>
                <a href="#"><span class="menu-text">100G</span></a>
                <ul class="offcanvas-submenu">
                  <li>
                    <a href="100g-port1.html">100G1</a>
                  </li>
                  <li>
                    <a href="100g-port2.html">100G2</a>
                  </li>
                  <li>
                    <a href="100g-port3.html">100g3</a>
                  </li>
                </ul>
              </li>
              <li><a href="40g-data.html">40G</a></li>
              <li><a href="25g-data.html">25G</a></li>
              <li><a href="10g-data.html">10G</a></li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Network Cards/Cables </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="network-card-700series.html"><span class="menu-text">700 Series</span></a>
              </li>
              <li>
                <a href="network-card-800series.html"><span class="menu-text">800 Series</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Routers </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="routers.html"><span class="menu-text">COR580</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Firewalls </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="firewalls.html"><span class="menu-text">Netgate 7100 1U</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Smart Racks </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="racks.html"><span class="menu-text">Computer Racks</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" ><span class="menu-text">Management Units </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="management-units.html"><span class="menu-text">IMOU Unit</span></a>
              </li>
            </ul>
          </li>
              </ul>
            </li>
            
            <li class="shop-text">
              <a  class="shop-text1" href="about.html"><span class="menu-text">About US</span></a>
            </li>
            <li class="shop-text">
              <a  class="shop-text1" href="contact-us.html"><span class="menu-text">Contact</span></a>
            </li>
          </ul>
        </nav>
        <div class="offcanvas-social py-30">
          <ul>
            <li>
              <a href="#"><i class="icon-social-facebook"></i></a>
            </li>
            <li>
              <a href="#"><i class="icon-social-twitter"></i></a>
            </li>
            <li>
              <a href="#"><i class="icon-social-instagram"></i></a>
            </li>
            <li>
              <a href="#"><i class="icon-social-google"></i></a>
            </li>
            <li>
              <a href="#"><i class="icon-social-instagram"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- offcanvas-mobile-menu end -->
    <!-- OffCanvas Wishlist Start -->
    <div id="offcanvas-wishlist" class="offcanvas offcanvas-wishlist theme1">
      <div class="inner">
        <div class="head d-flex flex-wrap justify-content-between">
          <span class="title">Wishlist</span>
          <button class="offcanvas-close">×</button>
        </div>
        <ul class="minicart-product-list">
          <li>
            <a href="single-product.html" class="image"
              ><img src="./assets/img/mini-cart/4.png" alt="Cart product Image"
            /></a>
            <div class="content">
              <a href="single-product.html" class="title"
                >orginal Age Defying Cosmetics Makeup</a
              >
              <span class="quantity-price"
                >1 x <span class="amount">$100.00</span></span
              >
              <a href="#" class="remove">×</a>
            </div>
          </li>
          <li>
            <a href="single-product.html" class="image"
              ><img src="./assets/img/mini-cart/5.png" alt="Cart product Image"
            /></a>
            <div class="content">
              <a href="single-product.html" class="title"
                >On Trend Makeup and Beauty Cosmetics</a
              >
              <span class="quantity-price"
                >1 x <span class="amount">$35.00</span></span
              >
              <a href="#" class="remove">×</a>
            </div>
          </li>
          <li>
            <a href="single-product.html" class="image"
              ><img src="./assets/img/mini-cart/6.png" alt="Cart product Image"
            /></a>
            <div class="content">
              <a href="single-product.html" class="title"
                >orginal Age Defying Cosmetics Makeup</a
              >
              <span class="quantity-price"
                >1 x <span class="amount">$9.00</span></span
              >
              <a href="#" class="remove">×</a>
            </div>
          </li>
        </ul>
        <a
          href="wishlist.html"
          class="btn btn-primary btn--lg d-block d-sm-inline-block mt-30"
          >view wishlist</a
        >
      </div>
    </div>
    <!-- OffCanvas Wishlist End -->
    
    <!-- OffCanvas Cart Start -->
    <div id="offcanvas-cart" class="offcanvas offcanvas-cart theme1">
      <div class="inner">
        <div class="head d-flex flex-wrap justify-content-between">
            <span class="title">Cart</span>
            <button class="offcanvas-close">×</button>
        </div>
        <div  id="side-cart">
        </div>
        </div>
        <div class="px-5">
        <a href="cart.html" class="btn btn-secondary btn--lg d-block d-sm-inline-block me-sm-2 side-cart-btn" >view cart</a>
                <a href="checkout.html" class="btn btn-dark btn--lg d-block d-sm-inline-block mt-4 mt-sm-0 side-cart-btn" >checkout</a>
                <p class="minicart-message">Free Shipping on All Orders Over $100!</p>
        </div>
      </div>
    <!-- OffCanvas Cart End -->
    
    <!-- header start -->
    <header>
      <!-- header-middle satrt -->
      <div id="sticky" class="header-middle theme1 py-lg-0 main-index product-info-page">
        <div class="container position-relative headers">
          <div class="row align-items-center">
            <div class="col-6 col-lg-2 col-xl-2 mt-0">
              <div class="logo">
                <a href="index.html"
                  ><img class="main-logo img-fluid " src="./assets/img/logo/logo-white.png" alt="anwi-logo"
                /></a>
              </div>
            </div>
            <div class="col-xl-10 col-lg-10 d-none d-lg-block">
              <ul class="main-menu  d-flex justify-content-right">
                <li class="ml-0 highlight">
                  <a href="index.html" class="ps-0 main-nav-list"><span class="active cool-link">Home</span></a>
                </li>
                <li class="position-static highlight">
                  <div class="nav-products main-nav-list"><span class="active cool-link">Products</span> <i class="ion-ios-arrow-down"></i></div>
                  <div class="mega-menu row">
                    <div class="container nav-mega-menu">
                      <ul id="tabs-nav" class=" nav-menu-category">
                       <li data-role="thumb-1" class="nav-menu-category1 active py-3">
                       <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>SERVERS</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                           <section data-role="content-1" class="menu-sections">
                             <!-- <button class="close-btn">×</button> -->
                             <div class="container mt-5">
                             <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class= "d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Servers</h4></div> <div><a href="products.html" class= "view-all">view all</a> </div> </div>
                               <div class=" mx-5 border-bottom row">
                                 <a href="surpass3u.html" class="col-md-4 d-flex py-5 nav-product">
                                   <img src="./assets/img/servers/american-pass-fv.png" class="mega-nav-img">
                                   <div class="sub-nav-list">American Pass</div>
                                   </a>
                                 <a href="surpass2u.html" class="col-md-4 d-flex py-5 nav-product">
                                    <img src="./assets/img/servers/creek-pass-fv.png" class="mega-nav-img">
                                   <div class="sub-nav-list">Coyote Pass</div>
                                 </a>
                                 <a href="surpass1u.html" class="col-md-4 d-flex py-5 nav-product">
                                    <img src="./assets/img/servers/creek-pass-fv.png" class="mega-nav-img">
                                   <div class="sub-nav-list">North Pass</div>
                                 </a>
                             </div>
                           </section>
                       </li>
                   </ul>
                    <!-- servers-end -->
                    <ul class=" nav-menu-category">
                    <li data-role="thumb-2" class="nav-menu-category1 py-3">
                    <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>STORAGE</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                        <section data-role="content-2" class="menu-sections">
                         <div class="container mt-5">
                         <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Storage</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                           <div class="row mx-5 border-bottom">
                            <a href="24-bay-storage.html" class="col-md-4 d-flex py-5">
                            <img src="./assets/img/storage/24-bay-storage.png" class="mega-nav-img switches router">
                            <div class="sub-nav-list">24 Bay Storage </div>
                            </a>
                         </div>
                          </section>
                       </ul>
                       <!-- storage-end -->
                    <ul class=" nav-menu-category">
                     <li data-role="thumb-2" class=" nav-menu-category1 py-3">
                     <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Switches</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                         <section data-role="content-2" class="menu-sections">
                          <div class="container mt-5">
                          <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Network Switches</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                            <div class="row mx-5 border-bottom">
                             <a href="10g-data.html" class="col-md-3 d-flex py-5">
                             <img src="./assets/img/650!450/10g.png" class="mega-nav-img switches">
                             <div >10G-Switch</div>
                             </a>
   
                             <a href="25g-data.html" class="col-md-3 d-flex py-5">
                             <img src="./assets/img/650!450/25g.png" class="mega-nav-img switches">
                               <div >25G-Switch</div>
                               </a>
                              
   
                               <a href="40g-data.html" class="col-md-3 d-flex py-5">
                                 <img src="./assets/img/650!450/40g.png" class="mega-nav-img switches">
                                 <div >40G-Switch</div>
                                 </a>
                               
   
                             <a href="100g-port1.html" class="col-md-3 d-flex py-5">
                                <img src="./assets/img/650!450/100g1.png" class="mega-nav-img switches">
                               <div >100G-1 Switch</div>     
                            </a>
                            </div>
                           <div class="row mt-5 mx-5 border-bottom">
                           <a href="100g-port2.html" class="col-md-3 d-flex py-5">
                           <img src="./assets/img/650!450/100g2.png" class="mega-nav-img switches">
                           <div href="100g-port2.html" >100G-2 Switch</div>
                           </a>
                         
   
                           <a href="100g-port3.html" class="col-md-3 d-flex py-5">
                             <img src="./assets/img/650!450/100g3.png" class="mega-nav-img switches">
                             <div >100G-3 Switch</div>
                             </a>
   
                               <a href="400g-data.html" class="col-md-3 d-flex py-5">
                                 <img src="./assets/img/650!450/400g.png" class="mega-nav-img switches">
                                 <div >400G Switch</div>
                                 </a>
                            </div>
                          </div>
                           </section>
                        </ul>
                        <!-- switches-end -->
                        <ul class=" nav-menu-category">
                         <li data-role="thumb-2" class="nav-menu-category1 py-3">
                         <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Cards/Cables</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                             <section data-role="content-2" class="menu-sections">
                              <div class="container mt-5">
                              <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Network Cards</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                                <div class="row mx-5 border-bottom">
                                 <a href="network-card-700series.html" class="col-md-4 d-flex py-5">
                                 <img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches">
                                 <div class="sub-nav-list">Anwi Ethernet Network Adapter XXV710</div>
                                 </a>
                                 <a href="network-card-800series.html" class="col-md-4 d-flex py-5">
                                  <img src="./assets/img/650!450/800-series.png" class="mega-nav-img switches">
                                   <div class="sub-nav-list">Anwi Ethernet 800 Series Network Adapters</div>
                                   </a>
                              </div>
                               </section>
                            </ul>
                            <!-- network-cards / cables end -->
  
                            <!---Routers start -->
                            <ul class=" nav-menu-category">
                         <li data-role="thumb-2" class="nav-menu-category1 py-3">
                         <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Routers</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
                             <section data-role="content-2" class="menu-sections" >
                              <div class="container mt-5">
                              <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Routers</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                                <div class="row mx-5 border-bottom">
                                 <a href="routers.html" class="col-md-4 d-flex py-5">
                                 <img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches">
                                 <div class="sub-nav-list">Routers</div>
                                 </a>
                              </div>
                               </div></section>
                            </li></ul>
                            <!---Routers end -->
  
                            <!---Firewalls start -->
                            <ul class=" nav-menu-category">
                         <li data-role="thumb-2" class="nav-menu-category1 py-3">
                         <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Firewalls</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
                             <section data-role="content-2" class="menu-sections" >
                              <div class="container mt-5">
                              <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Firewalls</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                                <div class="row mx-5 border-bottom">
                                 <a href="firewall.html" class="col-md-4 d-flex py-5">
                                 <img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
                                 <div >Netgate 7100 1U</div>
                                 </a>
                              </div>
                               </div></section>
                            </li></ul>
                            <!---Firewalls end -->
  
                            <!---Smart Racks start -->
                            <ul class=" nav-menu-category">
                         <li data-role="thumb-2" class="nav-menu-category1 py-3">
                         <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Smart Racks</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                             <section data-role="content-2" class="menu-sections" >
                              <div class="container mt-5">
                              <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Smart Racks</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                                <div class="row mx-5 border-bottom">
                                 <a href="racks.html" class="col-md-4 d-flex py-5">
                                 <img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
                                 <div >Computer Racks</div>
                                 </a>
                              </div>
                               </div></section>
                            </li></ul>
                            <!---Smart Racks end -->
  
                            <!---Management Units start -->
                            <ul class=" nav-menu-category">
                         <li data-role="thumb-2" class="nav-menu-category1 py-3">
                         <a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Management Units</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                             <section data-role="content-2" class="menu-sections" >
                              <div class="container mt-5">
                              <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Management Units</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                                <div class="row mx-5 border-bottom">
                                 <a href="management-units.html" class="col-md-4 d-flex py-5">
                                 <img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
                                 <div >IMOU Unit</div>
                                 </a>
                              </div>
                               </div></section>
                            </li></ul>
                            <!---Management units end -->
                  </div>
                </div>
            
                <li class="highlight">
                  <a href="about.html"  class="main-nav-list"><span class="active cool-link">About US</span></a>
                </li>
                <li class="highlight">
                  <a href="contact-us.html"  class="main-nav-list"><span class="active cool-link">Contact</span></a>
                </li>
                <li class="highlight currency">
                <select class="browser-default" id="custom-selects">
                  <option value="inr" id="inr" selected>INR</option>
                  <option value="usd" id="usd">USD</option>
                  <option value="gbp" id="gbp">GBP</option>
              </select>
                </li>
              </ul>
            </div>
            <div class="col-6 col-lg-2 mt-0">
              <!-- search-form end -->
              <div class="d-flex align-items-center justify-content-end">
                <!-- static-media end -->
                <div class="mobile-menu-toggle theme1 d-lg-none">
                  <a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
                  <svg viewBox="0 0 700 550">
                  <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" style="stroke: #fff;"></path>
                  <path d="M300,320 L540,320" id="middle" style="stroke: #fff;"></path>
                  <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)" style="stroke: #fff;"></path>
                </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- header-middle end -->
    </header>
    <!-- header end -->
   `;
  $("#navbar-head").html(navbarHtml);

  $(".nav-products").click(function () {
    $(".mega-menu").toggle();
  });

  // all category hover
  $(".nav-menu-category1").mouseover(function () {
    $(".nav-menu-category1").find("a").removeClass("active");
    $(this).find("a").addClass("active");
    $(".menu-sections").attr("Style", "");
  });

  // products hover
  $("a.main-nav-list").click(function () {
    $("a.main-nav-list").removeClass("active");
    $(this).addClass("active");
    $(".nav-menu-category1.bgg .menu-sections").css("top", "1.7%");
  });


  $(".nav-menu-category1.active").removeClass("active");
  $(this).parents(".menu-sections").removeClass("d-none");
  $(this).parents(".menu-sections").parent().addClass("active");

  //  active-menu for navbar
  if (location.pathname != "/") {
    // Main Nav
    $("a.main-nav-list").each(function () {
      if (this.href === location.href) {
        $(this).addClass("active");
        if ($(this).parents().hasClass("highlight")) {
          $(this)
            .parents("highlight")
            .find("a.main-nav-list")
            .addClass("active");
        }
        return false;
      }
      //  else if ($('body[data-page="product"]')) {
      //   $(this).addClass("active");
      // }
    });
  }


  //  active-menu for sub category
  // if (location.pathname != "/") {
  //     // Main Nav
  //     $(".sub-nav-list").each(function () {
  //         if (this.href === location.href) {
  //             $(this).addClass("active");
  //             if ($(this).parents().hasClass("highlight")) {
  //                 $(this)
  //                     .parents("highlight")
  //                     .find("a.sub-nav-list")
  //                     .addClass("active");
  //                 $(this)
  //                     .parents(".nav-menu-category1")
  //                     .css("background", "white")
  //                     .addClass("bgg");
  //                 $(this).parents(".menu-sections").css("top", "1.7%");
  //                 $(this).parents('.menu-sections').parent().addClass('active');
  //             }
  //             return false;
  //         }
  //     });
  // }

  // border for products 
  if (location.pathname != "/") {
    $(".nav-product").each(function () {
      if (this.href === location.href) {
        $(this).addClass("border");
      }
    })
  }


  /*--------------------------- Commons Variables ------------------------------ */
  const $window = $(window),
    $body = $("body");

  /*-------------------------- Sticky Menu ---------------------------- */
  var initialSrc = "./assets/img/logo/logo-white.png";
  var scrollSrc = "./assets/img/logo/logo-black.png";

  $($window).on("scroll", function () {
    var scroll = $($window).scrollTop();
    if (scroll < 150) {
      $("#sticky").removeClass("is-isticky");
      $("#sticky").addClass("main-index");
    } else {
      $("#sticky").addClass("is-isticky");
      $("#sticky").removeClass("main-index");
    }

    var value = $(this).scrollTop();
    if ($('body').attr("data-page") != "product") {
      if (value > 100) {
        $(".main-logo").attr("src", scrollSrc);
        $(".mobile-menu-toggle.theme1 svg path").css("stroke", "#000");
      } else {
        $(".main-logo").attr("src", initialSrc);
        $(".mobile-menu-toggle.theme1 svg path").css("stroke", "#fff");
      }
    }
  });
  if ($('body').attr("data-page") == "product") {
    // console.log("working");
    $(".waves").removeClass("waves");
    $(".main-logo").attr("src", scrollSrc);
    $(".nav-products").addClass("active");
  }

  /*---------------------------------
            Off Canvas toggler Function
        -----------------------------------*/
  const $offCanvasToggle = $(".offcanvas-toggle"),
    $offCanvas = $(".offcanvas"),
    $offCanvasOverlay = $(".offcanvas-overlay"),
    $mobileMenuToggle = $(".mobile-menu-toggle");
  $offCanvasToggle.on("click", function (e) {
    e.preventDefault();
    const $this = $(this),
      $target = $this.attr("href");
    $body.addClass("offcanvas-open");
    $($target).addClass("offcanvas-open");
    $offCanvasOverlay.fadeIn();
    if ($this.parent().hasClass("mobile-menu-toggle")) {
      $this.addClass("close");
    }
  });

  $(".offcanvas-close, .offcanvas-overlay").on("click", function (e) {
    e.preventDefault();
    $body.removeClass("offcanvas-open");
    $offCanvas.removeClass("offcanvas-open");
    $offCanvasOverlay.fadeOut();
    $mobileMenuToggle.find("a").removeClass("close");
  });

  /*----------------------------------
           Off Canvas Menu
       -----------------------------------*/
  function mobileOffCanvasMenu() {
    var $offCanvasNav = $(".offcanvas-menu, .overlay-menu"),
      $offCanvasNavSubMenu = $offCanvasNav.find(".offcanvas-submenu");

    /*Add Toggle Button With Off Canvas Sub Menu*/
    $offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"></span>');

    /*Category Sub Menu Toggle*/
    $offCanvasNav.on("click", "li a, .menu-expand", function (e) {
      var $this = $(this);
      if ($this.attr("href") === "#" || $this.hasClass("menu-expand")) {
        e.preventDefault();
        if ($this.siblings("ul:visible").length) {
          $this.parent("li").removeClass("active");
          $this.siblings("ul").slideUp();
          $this.parent("li").find("li").removeClass("active");
          $this.parent("li").find("ul:visible").slideUp();
        } else {
          $this.parent("li").addClass("active");
          $this
            .closest("li")
            .siblings("li")
            .removeClass("active")
            .find("li")
            .removeClass("active");
          $this.closest("li").siblings("li").find("ul:visible").slideUp();
          $this.siblings("ul").slideDown();
        }
      }
    });
  }

  mobileOffCanvasMenu();

  $(".close").on("click", function () {
    $("body").removeClass("open");
  });

  $("#custom-selects").on('change', function (e) {
    let previousCurrency = localStorage.getItem('currency');
    localStorage.setItem('currency', e.target.value.toUpperCase());
    updatePrices(previousCurrency, e.target.value.toUpperCase());

    updatePrices(rates[usercurency]);
  })



});
// $(".fade").addClass