Home page burger menu scroll fix (#26853)

* adding a scroll fix

* generalising the solution so it works for both BS3 and BS5

GitOrigin-RevId: 8dd0d82356b484adcad9de487b12ecfc4050d109

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

@@ -36,7 +36,7 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
 		- var canDisplayScriptLogMenu = hasFeature('saas') && canDisplayAdminMenu
 
 		if typeof suppressNavbarRight === 'undefined'
-			button.navbar-toggler.collapsed(
+			button#navbar-toggle-btn.navbar-toggler.collapsed(
 				type='button'
 				data-bs-toggle='collapse'
 				data-bs-target='#navbar-main-collapse'

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

@@ -2,7 +2,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 	.container-fluid
 		.navbar-header
 			if typeof suppressNavbarRight == 'undefined'
-				button.navbar-toggle.collapsed(
+				button#navbar-toggle-btn.navbar-toggle.collapsed(
 					type='button'
 					data-toggle='collapse'
 					data-target='#navbar-main-collapse'

services/web/frontend/js/bootstrap-3.ts

@@ -2,3 +2,4 @@ import 'bootstrap'
 import './features/contact-form'
 import './features/bookmarkable-tab/index'
 import './features/tooltip/index-bs3'
+import './features/navbar/index'

services/web/frontend/js/bootstrap-5.ts

@@ -1,3 +1,4 @@
 import './features/bookmarkable-tab/index-bs5'
 import './features/tooltip/index-bs5'
+import './features/navbar/index'
 import 'bootstrap-5'

services/web/frontend/js/features/navbar/index.ts

@@ -0,0 +1,9 @@
+const toggleButton = document.getElementById('navbar-toggle-btn') as HTMLElement
+
+toggleButton.addEventListener('click', () => {
+  // Delay allows Bootstrap to update aria-expanded first
+  setTimeout(() => {
+    const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true'
+    document.body.classList.toggle('no-scroll', isExpanded)
+  }, 5)
+})

services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss

@@ -1,3 +1,8 @@
+.no-scroll {
+  height: 100vh;
+  overflow: hidden;
+}
+
 // Default navbar
 .navbar-default {
   background-color: var(--navbar-bg);

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

@@ -7,6 +7,11 @@
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
 
+.no-scroll {
+  height: 100vh;
+  overflow: hidden;
+}
+
 .navbar {
   position: relative;
   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)