updated the menu issue in mobile view

assets/js/style.js

@@ -375,13 +375,24 @@
 			selector: "[data-toggle=tooltip]",
 			placement: "bottom",
 		});
+		$(".menu-item-has-children a").on("click", function (e) {
+			e.preventDefault();
+			$(this).parent().toggleClass("show");
+		});
+	});
+	$(document).on("click", function (e) {
+		if (!$(e.target).closest(".menu-item-has-children").length) {
+			$(".menu-item-has-children").removeClass("show");
+		}
 	});
 
 	$(".toggler-icon").click(function () {
 		$(".navbar-nav").addClass("show");
 	});
 	$(".navbar-nav li").click(function () {
-		$(".navbar-nav").removeClass("show");
+		if (!$(this).hasClass("menu-item-has-children")) {
+			$(".navbar-nav").removeClass("show");
+		}
 	});
 
 	$(".side-menu-close").click(function () {
@@ -424,6 +435,7 @@
 
 	var lastScrollTop = 0;
 	$(window).scroll(function (event) {
+		$(".menu-item-has-children").removeClass("show");
 		var thisValue = $(this).scrollTop();
 		if (thisValue == 0) {
 			$(".navbar").removeClass("sticky-top");

dev/sass/base/_header.scss

@@ -190,19 +190,25 @@
 								position: absolute;
 								top: 50%;
 								right: 0;
-								transform: translateY(-50%);
+								transform: translateY(-50%) rotate(90deg);
 								width: 10px;
 								height: 7px;
 								background: url(../img/angle-right.svg) no-repeat center/contain;
 							}
 						}
 
-						&:hover {
+						&:hover,
+						&.show {
 							> ul {
 								opacity: 1;
 								visibility: visible;
 								transform: translateY(0);
 							}
+							a {
+								&::before {
+									transform: translateY(-50%) rotate(-90deg);
+								}
+							}
 						}
 
 						ul {
@@ -430,11 +436,12 @@
 								visibility: visible;
 								transform: translateY(0);
 								display: none;
+								padding-left: 12px;
 
 								li {
 									a {
 										padding-left: 12px;
-										border-radius: 12px;
+										// border-radius: 12px;
 									}
 									ul {
 										padding-left: 12px;
@@ -442,7 +449,8 @@
 								}
 							}
 
-							&:hover {
+							&:hover,
+							&.show {
 								> ul {
 									display: block;
 								}