[UI] Fix Navbar not closing on click getting started in mobile view

Signed-off-by: hymmns <[email protected]>
meshery · Aug 29, 2024 · 62f6082 · 62f6082
1 parent 95cf08c
commit 62f6082
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -4,8 +4,7 @@
 	<div class="stellarnav">
 		<ul class="nav-list">
 			{% for link in site.data.navigation %}
-			<li class="nav-item" 
-			{% if link.highlight %} onclick="onClickGettingStarted()" {% endif%}>
+			<li class="nav-item">
 				{% assign class = "nav-text" %}
 				{% if link.highlight %}
 					{% assign class = class | append: " highlight" %}

diff --git a/js/stellarnav.js b/js/stellarnav.js
@@ -169,33 +169,7 @@
 			}
 
 			// opens and closes menu
-			$('.menu-toggle, .stellarnav-open').on('click', function(e) {
-				e.preventDefault();
-
-				// if nav position is left or right, uses fadeToggle instead of slideToggle
-				if (settings.position == 'left' || settings.position == 'right') {
-					nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
-					nav.toggleClass('active');
-
-					if(nav.hasClass('active') && nav.hasClass('mobile')) {
-						// closes the menu when clicked outside of it
-						$(document).on('click', function(event) {
-							// ensures menu hides only on mobile nav
-							if(nav.hasClass('mobile')) {
-							  	if (!$(event.target).closest(nav).length) {
-							  		nav.find('ul:first').stop(true, true).fadeOut(settings.openingSpeed);
-							  		nav.removeClass('active');
-								}
-							}
-						});
-					}
-
-				} else {
-					// static position - normal open and close animation
-					nav.find('ul:first').stop(true, true).slideToggle(settings.openingSpeed);
-					nav.toggleClass('active');
-				}
-			});
+			$('.menu-toggle, .stellarnav-open').on('click', toggleMenu);
 
 			// activates the close button
 			$('.close-menu, .stellarnav-close').on('click', function() {
@@ -224,6 +198,11 @@
 			// expands the dropdown menu on each click of nav-text
 			nav.find('li .sub-list').on('click', navbarExpand);
 
+			nav.find('li.nav-item').not('.has-sub').on('click', (e) => {
+				toggleMenu(e);
+				window.location.href = e.target.href;
+			} )
+
 			function navbarExpand(e) {
 				e.preventDefault();
 				$(this).parent('li').children('ul').stop(true, true).slideToggle(settings.openingSpeed);
@@ -269,6 +248,34 @@
 				});
 			}
 
+			function toggleMenu(e) {
+				e.preventDefault();
+
+				// if nav position is left or right, uses fadeToggle instead of slideToggle
+				if (settings.position == 'left' || settings.position == 'right') {
+					nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
+					nav.toggleClass('active');
+
+					if(nav.hasClass('active') && nav.hasClass('mobile')) {
+						// closes the menu when clicked outside of it
+						$(document).on('click', function(event) {
+							// ensures menu hides only on mobile nav
+							if(nav.hasClass('mobile')) {
+								if (!$(event.target).closest(nav).length) {
+									nav.find('ul:first').stop(true, true).fadeOut(settings.openingSpeed);
+									nav.removeClass('active');
+								}
+							}
+						});
+					}
+
+				} else {
+					// static position - normal open and close animation
+					nav.find('ul:first').stop(true, true).slideToggle(settings.openingSpeed);
+					nav.toggleClass('active');
+				}
+			}
+
 			windowCheck();
 
 			// check browser width in real-time