Navbar Toggler is closing on clicking anywhere on screen

Question

I have a dropdown in my navbar. When I resize the screen and make it smaller then navbar toggler button appear and when I click on it then the menu of navbar open to the left side of screen. I can not open the dropdown in this situation because if I click anyware then the navbar menu is closed automatically due to this whenever I click on dropdown to open it the menu is automatically closed. I'm also attaching the image.

Here is the code

<nav>
    <div class="nav-bar">
        <i class='bx bx-menu sidebarOpen'></i>
        <span class="logo navLogo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>

        <div class="menu">
            <div class="logo-toggle">
                <span class="logo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>
                <i class='bx bx-x siderbarClose'></i>
            </div>

            <ul class="nav-links">
                <li><a href="index.php">Home</a></li>

                <div class="dropdown ml-3 mr-2">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-column columns-2">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Fact & Mystery</a></li>
                                            <li><a href="#">History</a></li>
                                            <li><a href="#">Earning</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-6">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Fashion & Style</a></li>
                                            <li><a href="#">Tech</a></li>
                                            <li><a href="#">Health</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </ul>
                    </div>

                <li><a href="pages/about.php">About</a></li>
                <li><a href="pages/privacy-policy.php">Privacy Policy</a></li>
                <li><a href="pages/disclaimer.php">Disclaimer</a></li>
                <li><a href="comment/index.php">Contact</a></li>
            </ul>
        </div>

        <div class="darkLight-searchBox">
            <div class="searchBox">
                <div class="searchToggle">
                    <!--                     <i class='bx bx-x cancel'></i>
                    <i class='bx bx-search search'></i> -->
                </div>

                <!--                     <div class="search-field">
                        <input type="text" id="search" placeholder="Search...">
                        <i class='bx bx-search'></i>
                    </div> -->
            </div>
        </div>
    </div>
</nav>

<script>
const body = document.querySelector("body"),
    nav = document.querySelector("nav"),
    modeToggle = document.querySelector(".dark-light"),
    searchToggle = document.querySelector(".searchToggle"),
    sidebarOpen = document.querySelector(".sidebarOpen"),
    siderbarClose = document.querySelector(".siderbarClose");

let getMode = localStorage.getItem("mode");
if (getMode && getMode === "dark-mode") {
    body.classList.add("dark");
}

// js code to toggle search box
searchToggle.addEventListener("click", () => {
    searchToggle.classList.toggle("active");
});


//   js code to toggle sidebar
sidebarOpen.addEventListener("click", () => {
    nav.classList.add("active");
});

body.addEventListener("click", e => {
    let clickedElm = e.target;

    if (!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")) {
        nav.classList.remove("active");
    }
});
</script>

I'm expecting that the navbar menu should not be closed on clicking anyware on the screen as far as I click on close (✖)