anwi_website/dist/Js/navbar2.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="#" class="satoshi_font">LAPTOP</a>
                                                <ul class="mega-menu-style-1 border-top mega-menu-width2 menu-negative-mrg2 shadow d-flex justify-content-center">
                                                    <li class="mega-menu-sub-width20 p-0 me-4"><a class="menu-title" href="#">Shop Layout</a>
                                                        <a class="dropdown-item" href="./allinone34inch.html">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/allinone14inch/preview-front.png" alt="Laptop-img" class="img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font px-2  fs-9">ZENO 14-inch</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="mega-menu-sub-width20 p-0 d-none"><a class="menu-title" href="#">Product Layout</a>
                                                        <a class="dropdown-item " href="#">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/Navbar/Business-laptop.png" alt="Laptop-img" class="img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font px-2 fs-9">ZENO 15.6-inch Business Laptop</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="#" class="satoshi_font">ALL IN ONE</a>
                                                <ul class="mega-menu-style-1 border-top mega-menu-width2 menu-negative-mrg3  shadow d-flex justify-content-center">
                                                    <li class="me-4 p-0 mt-4">
                                                        <a class="dropdown-item" href="./allin_one.html">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/allin_imgs/desktop_1a.png" alt="Laptop-img" class="img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font fs-9">AIO 24-inch i5</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="p-0 d-none">
                                                        <a class="dropdown-item " href="#">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/Navbar/Compact-cpu.png" alt="Laptop-img" class="img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font fs-9">34 inch AIO i7 4K</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="#" class="satoshi_font product_data" item_id="106633220000002">ACCESSORIES</a>
                                                <ul class="mega-menu-style-1 border-top mega-menu-width2 menu-negative-mrg4  shadow d-flex justify-content-center">
                                                    <li class="me-4 p-0">
                                                        <a class="dropdown-item ram_data cursor-pointer" href="../ramproducts.html" accessories_id="106633220000007">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/Navbar/ram_img.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font px-2  fs-9">RAM</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="p-0">
                                                        <a class="dropdown-item" href="../storageproducts.html">
                                                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                                                <img src="../dist/assets/imgs/Navbar/ora3_ram.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
                                                            </div>
                                                            <div class="dropdown-item-content">
                                                                <h6 class="dropdown-item-title text-center satoshi_font px-2 fs-9">Storage</h6>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                            <a href="./support.html" class="satoshi_font">SUPPORT</a> 
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
                                <div class="search-style-1 d-none">
                                    <form>
                                        <div class="form-search-1">
                                            <input class="input-text" value="" placeholder="Type to search (Ex: Phone, Laptop)" type="search">
                                            <button>
                                                <i class="icofont-search-1"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div class="same-style">
                                    <a href="login.html"><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">
                <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="login.html"><i class="fa-solid fa-user"></i></a>
                                </div>
                                <div class="same-style header-cart">
                                    <a class="cart-active1" href="./shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- mini cart start -->
        <div class="sidebar-cart-active">
            <div class="sidebar-cart-all">
                <a class="cart-close" href="#"><i class="fa-solid fa-xmark"></i></a>
                <div class="cart-content">
                    <h3 class="satoshi_font">Shopping Cart</h3>
                    <ul>
                        <li class="single-product-cart">
                            <div class="cart-img">
                                <a href="#"><img src="assets/images/cart/cart-1.jpg" alt=""></a>
                            </div>
                            <div class="cart-title">
                                <h4><a href="#" class="satoshi_font">Awesome Mobile</a></h4>
                                <span class="satoshi_font"> 1 × $49.00	</span>
                            </div>
                            <div class="cart-delete">
                                <a href="#" class="satoshi_font">×</a>
                            </div>
                        </li>
                        <li class="single-product-cart">
                            <div class="cart-img">
                                <a href="#"><img src="assets/images/cart/cart-2.jpg" alt=""></a>
                            </div>
                            <div class="cart-title">
                                <h4><a href="#" class="satoshi_font">Smart Watch</a></h4>
                                <span class="satoshi_font"> 1 × $49.00	</span>
                            </div>
                            <div class="cart-delete">
                                <a href="#" class="satoshi_font">×</a>
                            </div>
                        </li>
                    </ul>
                    <div class="cart-total">
                        <h4 class="satoshi_font">Subtotal: <span class="satoshi_font">$170.00</span></h4>
                    </div>
                    <div class="cart-checkout-btn d-flex">
                        <a class="btn-hover cart-btn-style satoshi_font mx-1" href="cart.html">view cart</a>
                        <a class="no-mrg btn-hover cart-btn-style satoshi_font m-0" href="checkout.html">checkout</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 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="has-sub-menu d-none"><a href="#">Home</a>
                                    <ul class="sub-menu-2">
                                        <li class="has-sub-menu"><a href="#">Demo Group #01</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="index.html">Home Multipurpose</a></li>
                                                <li><a href="index-megashop.html">Home Mega Shop</a></li>
                                                <li><a href="index-fashion.html">Home Fashion</a></li>
                                                <li><a href="index-fashion-2.html">Home Fashion 2 </a></li>
                                                <li><a href="index-automobile.html">Home Automobile</a></li>
                                                <li><a href="index-furniture.html">Home Furniture</a></li>
                                                <li><a href="index-electric.html">Home Electric</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-sub-menu"><a href="#">Demo Group #02</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="index-electric-2.html">Home Electric 2</a></li>
                                                <li><a href="index-handcraft.html">Home Hand Craft</a></li>
                                                <li><a href="index-book.html">Home Book</a></li>
                                                <li><a href="index-book-2.html">Home Book 2</a></li>
                                                <li><a href="index-cake.html">Home cake</a></li>
                                                <li><a href="index-organic.html">Home Organic</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-sub-menu"><a href="#">Demo Group #03</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="index-flower.html">Home Flower</a></li>
                                                <li><a href="index-treeplant.html">Home Tree plant</a></li>
                                                <li><a href="index-pet-food.html">Home Pet Food</a></li>
                                                <li><a href="index-kids.html">Home Kids</a></li>
                                                <li><a href="index-kids-2.html">Home Kids 2</a></li>
                                                <li><a href="index-kids-3.html">Home Kids 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-sub-menu d-none"><a href="#">shop</a>
                                    <ul class="sub-menu-2">
                                        <li class="has-sub-menu"><a href="#">Shop Layout</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="shop.html">Shop Grid Style 1</a></li>
                                                <li><a href="shop-2.html">Shop Grid Style 2</a></li>
                                                <li><a href="shop-3.html">Shop Grid Style 3</a></li>
                                                <li><a href="shop-4.html">Shop Grid Style 4</a></li>
                                                <li><a href="shop-5.html">Shop Grid Style 5</a></li>
                                                <li><a href="shop-6.html">Shop Grid Style 6</a></li>
                                                <li><a href="shop-list.html">Shop List Style 1</a></li>
                                                <li><a href="shop-list-no-sidebar.html">Shop List Style 2</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-sub-menu"><a href="#">Product Layout</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="product-details.html">Product Layout 1</a></li>
                                                <li><a href="product-details-2.html">Product Layout 2</a></li>
                                                <li><a href="product-details-3.html">Product Layout 3</a></li>
                                                <li><a href="product-details-4.html">Product Layout 4</a></li>
                                                <li><a href="product-details-5.html">Product Layout 5</a></li>
                                                <li><a href="product-details-6.html">Product Layout 6</a></li>
                                                <li><a href="product-details-7.html">Product Layout 7</a></li>
                                                <li><a href="product-details-8.html">Product Layout 8</a></li>
                                                <li><a href="product-details-9.html">Product Layout 9</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-sub-menu"><a href="#">Shop Page</a>
                                            <ul class="sub-menu-2">
                                                <li><a href="my-account.html">My Account</a></li>
                                                <li><a href="checkout.html">Check Out</a></li>
                                                <li><a href="cart.html">Shopping Cart</a></li>
                                                <li><a href="wishlist.html">Wishlist</a></li>
                                                <li><a href="order-tracking.html">Order Tracking</a></li>
                                                <li><a href="compare.html">Compare</a></li>
                                                <li><a href="store.html">Store</a></li>
                                                <li><a href="empty-cart.html">Empty Cart</a></li>
                                                <li><a href="login-register.html">login / register</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-sub-menu"><a href="#" class="satoshi_font">Laptop</a>
                                    <ul class="sub-menu-2" style="list-style:none;">
                                        <li><a href="./allinone34inch.html" class="satoshi_font">ZENO 14 inch Business Laptop</a></li>
                                        <li class="d-none"><a href="#" class="satoshi_font">ZENO 15.6 inch Business Laptop</a></li>
                                    </ul>
                                </li>
                                <li class="has-sub-menu"><a href="#"  class="satoshi_font">All in One</a>
                                    <ul class="sub-menu-2" style="list-style:none;">
                                        <li><a href="./allin_one.html" class="satoshi_font">24 inch AIO i5</a></li>
                                        <li class="d-none"><a href="#" class="satoshi_font">34 inch AIO i7 4K</a></li>
                                    </ul>
                                </li>
                                <li class="has-sub-menu">
                                    <a href="#"class="satoshi_font product_data" item_id="106633220000002">Products</a>
                                </li>
                                <li class="has-sub-menu"><a href="#" class="satoshi_font">Accessories</a>
                                    <ul class="sub-menu-2" style="list-style:none;">
                                        <li><a href="../ramproducts.html" accessories_id="106633220000007" class="satoshi_font ram_data">Ram</a></li>
                                        <li><a href="#" class="satoshi_font">Storage</a></li>
                                    </ul>
                                </li>
                                <li class="">
                                    <a href="./support.html"class="satoshi_font" >Support</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 ele_page = $("body").hasClass("login_page");
 if(ele_page == true){
  //  $(".header-area").removeClass("bg-white")
 }

// $(".product_data").each(function () {
//     $(this).click(function () {
//         debugger;
//         let item_id = $(this).attr("item_id");
//         let loc_path = '/products.html'
//         if (window.location.pathname.includes(loc_path)) {
//             window.location.href = `?products`
//         }
//         else {
//             window.location.href = `/products.html?products`;
//         }
//     })
// });
let width = $(window).width();
$(".menu-negative-mrg2,.menu-negative-mrg3,.menu-negative-mrg4").css("width",width);

$("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}`;
    }
})

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