brihaspathi/js/navbar.js

const headerhtml = `<nav class="navbar">
    <section class="navbar__left">
        <a href="#" class="brand">
            <img src="img/logo-dark.png" class="w-75" alt="">
        </a>
        <div class="burger" id="burger">
            <span class="burger-line"></span>
            <span class="burger-line"></span>
            <span class="burger-line"></span>
        </div>
    </section>
    <section class="navbar__center">
        <span class="overlay"></span>
        <div class="menu" id="menu">
            <div class="menu__header">
                <span class="menu__arrow"><i class="bx bx-chevron-left"></i></span>
                <span class="menu__title"></span>
            </div>
            <ul class="menu__inner mb-0">
                <li class="menu__item"><a href="index.html" class="menu__link">Home</a></li>
                <li class="menu__item"><a href="about-us.html" class="menu__link">About Us</a></li>
              
                <li class="menu__item menu__dropdown">
                    <a href="#" class="menu__link">
                        Solutions
                        <i class="bx bx-chevron-right"></i>
                    </a>
                    <div class="submenu megamenu__text">
                        <div class="submenu__inner">
                            <h4 class="submenu__title">Supply Chain Solutions</h4>
                            <ul class="submenu__list">
                                <li><a href="dealer-automation.html">Dealer Automation</a></li>
                                <li><a href="secondary-sales.html">Secodary Sales </a></li>
                                <li><a href="e-governance.html">E-Governance </a></li>
                                <li><a href="loyalty-solutions.html">Loyalty Solutions</a></li>
                                <li><a href="block-chain-enabled.html">Block Chain Enabled</a></li>
                                <li><a href="track-and-trace.html">Track and Trace </a></li>
                            </ul>
                        </div>
                        <div class="submenu__inner">
                            <h4 class="submenu__title">Process Automation</h4>
                            <ul class="submenu__list">
                              <li><a href="enterprises.html">Enterprises</a></li>
                            <li><a href="govermnets.html">Governments</a></li>
                            <li><a href="small-businesses.html">Small Businesses</a></li>
                            </ul>
                        </div>
                        <div class="submenu__inner">
                            <h4 class="submenu__title">VMS</h4>
                            <ul class="submenu__list">
                                <li><a href="integrated-video-solutions.html">Integrated Video Solutions</a></li>
                                <li><a href="video-storage-solutions.html">Video Storage Solutions</a></li>
                                <li><a href="central-command-center.html">Central Command Center</a></li>
                                <li><a href="event-streaming.html">Event Streaming</a></li>
                                 <li><a href="video-analytics.html">Video Analytics</a></li>
                            </ul>

                        </div>
                    </div>
                </li>
                <li class="menu__item menu__dropdown">
                    <a href="#" class="menu__link">
                        Products
                        <i class="bx bx-chevron-right"></i>
                    </a>
                    <div class="submenu megamenu__normal">
                        <ul class="submenu__list">
                            <li><a href="cameras.html">Cameras</a></li>
                            <li><a href="storage-systems.html">Storage Systems</a></li>
                            <li><a href="ai-nvr.html">AI NVR (Coming Soon)</a></li>
                            <li><a href="racks.html">Racks</a></li>
                        </ul>
                    </div>
                </li>
                <li class="menu__item menu__dropdown">
                    <a href="#" class="menu__link">
                        Services
                        <i class="bx bx-chevron-right"></i>
                    </a>
                    <div class="submenu megamenu__text">
                        <div class="submenu__inner">
                            <ul class="submenu__list">
                                <li><a href="iot-technologies.html">IoT Technologies</a></li>
                                <li><a href="video-analytics.html">Video Analytics</a></li>
                                <li><a href="rf=technlogy.html">RF Technology </a></li>
                            </ul>
                        </div>
                        <div class="submenu__inner">
                            <ul class="submenu__list">
                                <li><a href="rooftop-solar.html">Rooftop Solar/Solar Pump</a></li>
                                <li><a href="software-development">Software Development</a></li>
                                <li><a href="home-automation.html">Home Automation</a></li>
                            </ul>
                        </div>
                        <div class="submenu__inner">
                            <ul class="submenu__list">
                                <li><a href="it-telecommunications.html">IT & Telecommunication</a></li>
                                <li><a href="smart-city.html">Smart Cities</a></li>
                                <li><a href="e-mobility-services.html">E-Mobility Services</a></li>
                            </ul>

                        </div>
                    </div>
                </li>
                <li class="menu__item"><a href="investors.html" class="menu__link">Investors</a></li>
                <li class="menu__item"><a href="resouces.html" class="menu__link">Resources</a></li>
                <li class="menu__item"><a href="contact-us.html" class="menu__link">Contact Us</a></li>
            </ul>
        </div>
    </section>
    <section class="navbar__right d-none">
        <button class="switch" id="switch">
            <span class="switch__light"><i class="bx bx-sun"></i></span>
            <span class="switch__dark"><i class="bx bx-moon"></i></span>
        </button>
    </section>
</nav>`;

$(function () {
    $('header').html(headerhtml);
    const menu = document.querySelector(".menu");
    const menuInner = menu.querySelector(".menu__inner");
    const menuArrow = menu.querySelector(".menu__arrow");
    const menuTitle = menu.querySelector(".menu__title");
    const burger = document.querySelector(".burger");
    const overlay = document.querySelector(".overlay");

    // Navbar Menu Toggle Function
    function toggleMenu() {
        menu.classList.toggle("is-active");
        overlay.classList.toggle("is-active");
    }

    // Show Mobile Submenu Function
    function showSubMenu(children) {
        subMenu = children.querySelector(".submenu");
        subMenu.classList.add("is-active");
        subMenu.style.animation = "slideLeft 0.35s ease forwards";
        const menuTitle = children.querySelector("i").parentNode.childNodes[0]
            .textContent;
        menu.querySelector(".menu__title").textContent = menuTitle;
        menu.querySelector(".menu__header").classList.add("is-active");
    }

    // Hide Mobile Submenu Function
    function hideSubMenu() {
        subMenu.style.animation = "slideRight 0.35s ease forwards";
        setTimeout(() => {
            subMenu.classList.remove("is-active");
        }, 300);

        menu.querySelector(".menu__title").textContent = "";
        menu.querySelector(".menu__header").classList.remove("is-active");
    }

    // Toggle Mobile Submenu Function
    function toggleSubMenu(e) {
        if (!menu.classList.contains("is-active")) {
            return;
        }
        if (e.target.closest(".menu__dropdown")) {
            const children = e.target.closest(".menu__dropdown");
            showSubMenu(children);
        }
    }

    // Fixed Navbar Menu on Window Resize
    window.addEventListener("resize", () => {
        if (window.innerWidth >= 768) {
            if (menu.classList.contains("is-active")) {
                toggleMenu();
            }
        }
    });

    // Dark and Light Mode with localStorage
    (function () {
        let darkMode = localStorage.getItem("darkMode");
        const darkSwitch = document.getElementById("switch");

        // Enable and Disable Darkmode
        const enableDarkMode = () => {
            document.body.classList.add("darkmode");
            localStorage.setItem("darkMode", "enabled");
        };

        const disableDarkMode = () => {
            document.body.classList.remove("darkmode");
            localStorage.setItem("darkMode", null);
        };

        // User Already Enable Darkmode
        if (darkMode === "enabled") {
            enableDarkMode();
        }

        // User Clicks the Darkmode Toggle
        darkSwitch.addEventListener("click", () => {
            darkMode = localStorage.getItem("darkMode");
            if (darkMode !== "enabled") {
                enableDarkMode();
            } else {
                disableDarkMode();
            }
        });
    })();

    // Initialize All Event Listeners
    burger.addEventListener("click", toggleMenu);
    overlay.addEventListener("click", toggleMenu);
    menuArrow.addEventListener("click", hideSubMenu);
    menuTitle.addEventListener("click", hideSubMenu);
    menuInner.addEventListener("click", toggleSubMenu);
})