@@ -500,9 +500,7 @@ document.addEventListener('DOMContentLoaded', () => {
500500 const languageSelect = document . getElementById ( 'language-select' ) ;
501501 const translationDisclaimer = document . getElementById ( 'translation-disclaimer' ) ;
502502 const translationControlsWrapper = document . getElementById ( 'translation-controls-wrapper' ) ;
503- const translationInfoLinkWrapper = document . getElementById ( 'translation-info-link-wrapper' ) ;
504- const translationInfoLink = document . getElementById ( 'translation-info-link' ) ;
505- const translationInfoTooltip = document . getElementById ( 'translation-info-tooltip' ) ;
503+ // Removed: translationInfoLinkWrapper, translationInfoLink, translationInfoTooltip
506504 const viewOriginalLink = document . getElementById ( 'view-original-link' ) ;
507505 const translateButton = document . getElementById ( 'translate-button' ) ;
508506 const clearTranslationsButton = document . getElementById ( 'clear-translations-button' ) ;
@@ -1778,10 +1776,7 @@ document.addEventListener('DOMContentLoaded', () => {
17781776 translationControlsWrapper . style . display = 'none' ;
17791777 }
17801778
1781- // Show translation info link
1782- if ( translationInfoLinkWrapper ) {
1783- translationInfoLinkWrapper . style . display = 'flex' ;
1784- }
1779+
17851780 } else {
17861781 // Show translation controls in menu
17871782 console . log ( 'Translation supported. Showing controls.' ) ;
@@ -1796,14 +1791,13 @@ document.addEventListener('DOMContentLoaded', () => {
17961791 translationControlsWrapper . style . display = 'block' ;
17971792 }
17981793
1799- // Hide translation info link
1800- if ( translationInfoLinkWrapper ) {
1801- translationInfoLinkWrapper . style . display = 'none' ;
1794+ if ( translationControlsWrapper ) {
1795+ translationControlsWrapper . style . display = 'block' ;
18021796 }
18031797 }
18041798 }
18051799
1806- // Handle language selection change - now just updates the dropdown, doesn't auto-translate
1800+ // Handle language selection change - now just updates the dropdown and resets if empty
18071801 if ( languageSelect ) {
18081802 languageSelect . addEventListener ( 'change' , async ( event ) => {
18091803 const selectedLanguage = ( event . target as HTMLSelectElement ) . value ;
@@ -1824,9 +1818,43 @@ document.addEventListener('DOMContentLoaded', () => {
18241818 }
18251819 // Restore original content if saved
18261820 if ( originalContent && chapterContent ) {
1827- // Reload the current page to get original content
1821+ // Reload the current page to get original content - this resets main content
1822+ // and triggers side nav regeneration in English
18281823 const currentFile = currentFilename || 'introduction.html' ;
18291824 loadContent ( currentFile , { updateHistory : false , forceReload : true } ) ;
1825+
1826+ // Re-populate chapters dropdown to restore English
1827+ if ( chapterListDropdown ) {
1828+ chapterListDropdown . innerHTML = '' ; // Clear current
1829+ chapters . forEach ( ( chapter ) => {
1830+ if ( ! chapter . filename || ! chapter . title ) return ;
1831+ const listItem = document . createElement ( 'li' ) ;
1832+ listItem . classList . add ( 'usa-nav__submenu-item' ) ;
1833+ const link = document . createElement ( 'a' ) ;
1834+ // Reconstruct logic from initialization
1835+ link . href = `/${ chapter . filename } ;
1836+ link . textContent = `${ chapter . number } ${ chapter . number ? ': ' : '' } ${ chapter . title } ;
1837+ link . dataset . filename = chapter . filename ;
1838+ link . addEventListener ( 'click' , ( e ) => {
1839+ e . preventDefault ( ) ;
1840+ const filename = link . dataset . filename ;
1841+ if ( filename !== currentFilename ) {
1842+ if ( filename ) loadContent ( filename , { updateHistory : true } ) ;
1843+ } else {
1844+ chapterContent ?. scrollTo ( { top : 0 , behavior : 'smooth' } ) ;
1845+ if ( filename !== 'glossary.html' ) updateSideNavCurrent ( null ) ;
1846+ history . replaceState ( { filename : filename , hash : null } , document . title , `/${ filename } ) ;
1847+ }
1848+ if ( uswdsNav && uswdsNav . classList . contains ( 'is-visible' ) ) {
1849+ uswdsOverlay ?. classList . remove ( 'is-visible' ) ;
1850+ uswdsNav . classList . remove ( 'is-visible' ) ;
1851+ if ( uswdsMenuButton ) uswdsMenuButton . setAttribute ( 'aria-expanded' , 'false' ) ;
1852+ }
1853+ } ) ;
1854+ listItem . appendChild ( link ) ;
1855+ chapterListDropdown . appendChild ( listItem ) ;
1856+ } ) ;
1857+ }
18301858 }
18311859 } else {
18321860 // A language was selected - show and enable the translate button
@@ -1872,6 +1900,22 @@ document.addEventListener('DOMContentLoaded', () => {
18721900 console . warn ( 'Translation failed or was cancelled' ) ;
18731901 }
18741902 }
1903+
1904+ // Translate Chapters Menu
1905+ if ( chapterListDropdown ) {
1906+ // We use specific filename for caching menu translation to avoid collisions or re-translation
1907+ const menuCacheKey = 'chapters_menu_dropdown' ;
1908+ await translationService . translateContent ( chapterListDropdown as HTMLElement , selectedLanguage , menuCacheKey ) ;
1909+ }
1910+
1911+ // Translate Sidenav
1912+ if ( sectionListContainer ) {
1913+ // Sidenav is dynamic based on content, but we can translate the current state
1914+ // Cache key based on current filename + 'sidenav'
1915+ const currentFile = currentFilename || 'introduction.html' ;
1916+ const sidenavCacheKey = `${ currentFile } ;
1917+ await translationService . translateContent ( sectionListContainer as HTMLElement , selectedLanguage , sidenavCacheKey ) ;
1918+ }
18751919 } ) ;
18761920 }
18771921
@@ -1906,70 +1950,13 @@ document.addEventListener('DOMContentLoaded', () => {
19061950 } ) ;
19071951 }
19081952
1909- // Handle translation info link tooltip
1910- if ( translationInfoLink && translationInfoTooltip ) {
1911- // Media query for responsive behavior
1912- const mobileBreakpoint = window . matchMedia ( '(max-width: 40em)' ) ;
1913-
1914- // Toggle tooltip on click
1915- translationInfoLink . addEventListener ( 'click' , ( event ) => {
1916- event . stopPropagation ( ) ;
1917- const isVisible = translationInfoTooltip . style . display !== 'none' ;
1918- const newVisibility = isVisible ? 'none' : 'block' ;
1919- translationInfoTooltip . style . display = newVisibility ;
1920- // Update ARIA attribute for accessibility
1921- translationInfoLink . setAttribute ( 'aria-expanded' , newVisibility === 'block' ? 'true' : 'false' ) ;
1922- } ) ;
1923-
1924- // Show tooltip on hover (desktop only) - use media query
1925- const handleMouseEnter = ( ) => {
1926- if ( ! mobileBreakpoint . matches ) {
1927- translationInfoTooltip . style . display = 'block' ;
1928- translationInfoLink . setAttribute ( 'aria-expanded' , 'true' ) ;
1929- }
1930- } ;
1931-
1932- const handleMouseLeave = ( ) => {
1933- if ( ! mobileBreakpoint . matches ) {
1934- translationInfoTooltip . style . display = 'none' ;
1935- translationInfoLink . setAttribute ( 'aria-expanded' , 'false' ) ;
1936- }
1937- } ;
1938-
1939- translationInfoLink . addEventListener ( 'mouseenter' , handleMouseEnter ) ;
1940- translationInfoLink . addEventListener ( 'mouseleave' , handleMouseLeave ) ;
1941-
1942- // Close tooltip when clicking outside
1943- document . addEventListener ( 'click' , ( event ) => {
1944- if ( translationInfoTooltip . style . display === 'block' &&
1945- ! translationInfoLink . contains ( event . target as Node ) &&
1946- ! translationInfoTooltip . contains ( event . target as Node ) ) {
1947- translationInfoTooltip . style . display = 'none' ;
1948- translationInfoLink . setAttribute ( 'aria-expanded' , 'false' ) ;
1949- }
1950- } ) ;
1951-
1952- // Accessibility: Close tooltip with Escape key
1953- document . addEventListener ( 'keydown' , ( event ) => {
1954- if ( event . key === 'Escape' && translationInfoTooltip . style . display === 'block' ) {
1955- translationInfoTooltip . style . display = 'none' ;
1956- translationInfoLink . setAttribute ( 'aria-expanded' , 'false' ) ;
1957- // Return focus to the button that opened the tooltip
1958- translationInfoLink . focus ( ) ;
1959- }
1960- } ) ;
1961- }
1962-
19631953 // Initialize translation on page load - set default visibility until check completes
19641954 const translationListItem = document . getElementById ( 'translation-controls-list-item' ) ;
19651955 if ( translationListItem ) {
19661956 translationListItem . style . display = 'none' ;
19671957 } else if ( translationControlsWrapper ) {
19681958 translationControlsWrapper . style . display = 'none' ;
19691959 }
1970- if ( translationInfoLinkWrapper ) {
1971- translationInfoLinkWrapper . style . display = 'flex' ;
1972- }
19731960
19741961 // Then run the async check to update based on actual browser support
19751962 initializeTranslation ( ) ;
0 commit comments