Merge pull request #18386 from overleaf/rd-footer-pug

[web] Migrate the language dropdown in footer to Bootstrap 5

GitOrigin-RevId: 07a37f59914c543ae8d33312aa313451145cd220

services/web/app/views/layout/fat-footer-base.pug

@@ -5,6 +5,9 @@
 			a(href="/legal") #{translate('privacy_and_terms')}
 			a(href="https://www.digital-science.com/security-certifications/") #{translate('compliance')}
 		ul.fat-footer-base-item.list-unstyled.fat-footer-base-language
+			if bootstrapVersion === 5
+				include language-picker-bootstrap-5
+			else
 				include language-picker
 	.fat-footer-base-section.fat-footer-base-social
 		.fat-footer-base-item

services/web/app/views/layout/language-picker-bootstrap-5.pug

@@ -0,0 +1,27 @@
+li.dropdown.dropup.subdued(dropdown).language-picker
+	a.dropdown-toggle#language-picker-toggle(
+		href="#",
+		dropdown-toggle,
+		data-ol-lang-selector-tooltip,
+		data-bs-toggle="dropdown",
+		role="button"
+		aria-haspopup="true",
+		aria-expanded="false",
+		aria-label="Select " + translate('language'),
+		tooltip=translate('language')
+		title=translate('language')
+	)
+		i.fa.fa-fw.fa-language
+		|
+		| #{settings.translatedLanguages[currentLngCode]}
+
+	ul.dropdown-menu(role="menu" aria-labelledby="language-picker-toggle")
+		li.dropdown-header #{translate("language")}
+		each subdomainDetails, subdomain in settings.i18n.subdomainLang
+			if !subdomainDetails.hide
+				- let isActive = subdomainDetails.lngCode === currentLngCode
+				li.lngOption
+					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams role="menuitem")(class=isActive ? 'dropdown-item active' : 'dropdown-item')(aria-selected=isActive ? 'true' : 'false')
+						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
+						if subdomainDetails.lngCode === currentLngCode
+							span.material-symbols.dropdown-item-trailing-icon.pull-right(aria-hidden="true") check

services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss

@@ -29,15 +29,18 @@
     color: inherit;
   }
 
-  &:hover:not(.active) {
+  &:hover:not(.active),
+  &:focus:not(.active) {
     background-color: var(--bg-light-secondary);
     cursor: pointer;
+    text-decoration: none;
   }
 
   &[variant='danger'] {
     color: var(--content-danger);
 
-    &:hover:not(.active) {
+    &:hover:not(.active),
+    &:focus:not(.active) {
       background-color: var(--bg-danger-03);
     }
   }

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

@@ -145,15 +145,12 @@ footer.site-footer {
         display: none; /* hiding rather than removing as still needed in the thin footer */
       }
 
-      a {
-        color: var(--content-secondary);
-
-        &:hover {
-          color: white;
+      .dropdown-item {
+        &.active {
+          color: var(--green-70);
         }
-
-        &:visited {
-          color: var(--content-secondary);
+        &:hover {
+          text-decoration: none;
         }
       }
     }