Merge pull request #17258 from overleaf/mf-fix-active-state-persisted-navbar-toggle

[web] Fix navbar toggle persisted active state on mobile

GitOrigin-RevId: 46e6962bc5ff003fd131419b94d7a04df3b619c6

services/web/app/views/layout/navbar-marketing.pug

@@ -5,7 +5,7 @@ nav.navbar.navbar-default.navbar-main
 				button.navbar-toggle.collapsed(
 					type="button",
 					data-toggle="collapse",
-					data-target="[data-ol-navbar-main-collapse]"
+					data-target="#navbar-main-collapse"
 					aria-label="Toggle " + translate('navigation')
 				)
 					i.fa.fa-bars(aria-hidden="true")
@@ -32,7 +32,7 @@ nav.navbar.navbar-default.navbar-main
 		- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
 
 		if (typeof(suppressNavbarRight) == "undefined")
-			.navbar-collapse.collapse(data-ol-navbar-main-collapse)
+			.navbar-collapse.collapse#navbar-main-collapse
 				ul.nav.navbar-nav.navbar-right
 					if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu)
 						li.dropdown.subdued

services/web/app/views/layout/navbar-website-redesign.pug

@@ -5,7 +5,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 				button.navbar-toggle.collapsed(
 					type="button",
 					data-toggle="collapse",
-					data-target="[data-ol-navbar-main-collapse]"
+					data-target="#navbar-main-collapse"
 					aria-label="Toggle " + translate('navigation')
 				)
 					i.fa.fa-bars(aria-hidden="true")
@@ -32,7 +32,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 		- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
 
 		if (typeof(suppressNavbarRight) == "undefined")
-			.navbar-collapse.collapse(data-ol-navbar-main-collapse)
+			.navbar-collapse.collapse#navbar-main-collapse
 				ul.nav.navbar-nav.navbar-right
 					if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu)
 						li.dropdown.subdued

services/web/frontend/stylesheets/components/navbar.less

@@ -508,13 +508,17 @@
   }
 
   .navbar-toggle {
-    border-color: @navbar-default-toggle-border-color;
-    color: @navbar-default-link-color;
-    &:hover,
-    &.active {
+    &.collapsed {
+      border-color: @navbar-default-toggle-border-color;
+      color: @navbar-default-link-color;
+      transition: 0.2s ease-out;
+    }
+
+    &:not(.collapsed) {
       background-color: @navbar-default-toggle-hover-bg;
       border-color: @navbar-default-toggle-hover-bg;
       color: #fff;
+      transition: 0.2s ease-in;
     }
   }
 
@@ -690,13 +694,17 @@
     }
 
     .navbar-toggle {
-      border-color: @navbar-default-toggle-border-color-website-redesign;
-      color: @navbar-default-link-color-website-redesign;
-      &:hover,
-      &.active {
+      &.collapsed {
+        border-color: @navbar-default-toggle-border-color-website-redesign;
+        color: @navbar-default-link-color-website-redesign;
+        transition: 0.2s ease-out;
+      }
+
+      &:not(.collapsed) {
         background-color: @navbar-default-toggle-hover-bg-website-redesign;
         border-color: @navbar-default-toggle-hover-bg-website-redesign;
         color: #fff;
+        transition: 0.2s ease-in;
       }
     }