245245 {% trans "Match" %}
246246 </ li >
247247 </ a >
248+ {% if user.is_authenticated %}
248249 < a class ="menu-link " href ="{% url 'progress' %} ">
249250 < li class ="mb-2 menu ps-3 py-1 ">
250251 {% trans "Progress" %}
251252 </ li >
252253 </ a >
254+ {% endif %}
253255 </ ul >
254256 </ div >
255257 </ li >
331333 </ div >
332334 {% endif %}
333335
334- < span class ="hamburger-button-menu ms-2 " type ="button " data-bs-toggle ="collapse " data-bs-target ="#navbar_global " aria-controls ="navbar_global " aria-expanded ="false " aria-label ="Toggle navigation ">
336+
337+ <!-- language switcher (moved into right-side toolbar) -->
338+ < div class ="dropdown ms-2 " style ="margin-left:10px;margin-right:5px; ">
339+ {% get_current_language as CURRENT_LANG %}
340+ {% with code=CURRENT_LANG|lower|slice:":2" %}
341+ < button class ="nav-link dropdown-toggle btn btn-link p-0 "
342+ id ="langDropdown "
343+ data-bs-toggle ="dropdown "
344+ aria-expanded ="false "
345+ title ="{% trans 'Language' %} "
346+ type ="button ">
347+ {% if code == "en" %}
348+ 🌐
349+ {% elif code == "es" %}
350+ < img class ="flag-icon " src ="{% static 'images/flags/es.png' %} " alt ="Español ">
351+ {% elif code == "zh" %}
352+ < img class ="flag-icon " src ="{% static 'images/flags/cn.png' %} " alt ="简体中文 ">
353+ {% elif code == "fr" %}
354+ < img class ="flag-icon " src ="{% static 'images/flags/fr.png' %} " alt ="Français ">
355+ {% elif code == "ja" %}
356+ < img class ="flag-icon " src ="{% static 'images/flags/jp.png' %} " alt ="日本語 ">
357+ {% elif code == "ko" %}
358+ < img class ="flag-icon " src ="{% static 'images/flags/kr.png' %} " alt ="한국어 ">
359+ {% else %}
360+ 🌐
361+ {% endif %}
362+ </ button >
363+ {% endwith %}
364+
365+ < ul id ="lang_menu " class ="dropdown-menu dropdown-menu-end " aria-labelledby ="langDropdown ">
366+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="en ">
367+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/us.png' %} " alt ="English "> English
368+ </ a > </ li >
369+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="es ">
370+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/es.png' %} " alt ="Español "> Español
371+ </ a > </ li >
372+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="zh-hans ">
373+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/cn.png' %} " alt ="简体中文 "> 简体中文
374+ </ a > </ li >
375+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="fr ">
376+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/fr.png' %} " alt ="Français "> Français
377+ </ a > </ li >
378+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="ja ">
379+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/jp.png' %} " alt ="日本語 "> 日本語
380+ </ a > </ li >
381+ < li > < a class ="dropdown-item d-flex align-items-center lang-choice " href ="# " data-lang ="ko ">
382+ < img class ="flag-icon me-2 " src ="{% static 'images/flags/kr.png' %} " alt ="한국어 "> 한국어
383+ </ a > </ li >
384+ </ ul >
385+ </ div >
386+
387+ < span class ="hamburger-button-menu ms-2 " type ="button " data-bs-toggle ="collapse "
388+ data-bs-target ="#navbar_global " aria-controls ="navbar_global " aria-expanded ="false "
389+ aria-label ="Toggle navigation ">
335390 < span class ="navbar-toggler-icon "> </ span >
336391 </ span >
337392
485540 } ) ;
486541 </ script >
487542
488-
489-
490543 </ div >
491544 </ div >
545+ < style >
546+ .flag-icon {
547+ width : 30px ;
548+ height : 21px ;
549+ object-fit : cover;
550+ flex-shrink : 0 ;
551+ margin-right : 10px ;
552+ display : inline-block;
553+ vertical-align : middle;
554+ border-radius : 2px ;
555+ }
556+
557+ .dropdown-menu # lang_menu {
558+ background-color : # fff !important ;
559+ border : 1px solid # ccc !important ;
560+ border-radius : 4px !important ;
561+ box-shadow : 0 2px 6px rgba (0 , 0 , 0 , .15 ) !important ;
562+ padding : 0 !important ;
563+ margin-top : 0.5rem !important ;
564+ min-width : auto !important ;
565+ width : auto !important ;
566+ }
567+
568+ .dropdown-menu # lang_menu .dropdown-item {
569+ color : # 4B5868 !important ;
570+ font-weight : 500 ;
571+ padding : 0.5rem 0.8rem !important ;
572+ padding-right : 1.2rem !important ;
573+ background-color : transparent !important ;
574+ border-bottom : 1px solid # eee ;
575+ display : flex !important ;
576+ align-items : center;
577+ justify-content : flex-start;
578+ }
579+
580+ .dropdown-menu # lang_menu .dropdown-item : last-child {
581+ border-bottom : none;
582+ }
583+
584+ .dropdown-menu # lang_menu .dropdown-item : hover ,
585+ .dropdown-menu # lang_menu .dropdown-item : focus {
586+ background-color : # 1967D2 !important ;
587+ color : # fff !important ;
588+ }
589+
590+ .dropdown-menu # lang_menu .dropdown-item .active {
591+ background-color : # ffcd11 !important ;
592+ color : # fff !important ;
593+ }
594+
595+ # langDropdown img .flag-icon {
596+ filter : none !important ;
597+ opacity : 1 !important ;
598+ }
599+ </ style >
600+ < script >
601+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
602+ const form = document . getElementById ( 'set-lang-form' ) ;
603+ const input = document . getElementById ( 'lang-input' ) ;
604+ document . querySelectorAll ( '.dropdown-item.lang-choice[data-lang]' ) . forEach ( a => {
605+ a . addEventListener ( 'click' , function ( e ) {
606+ e . preventDefault ( ) ;
607+ input . value = this . dataset . lang ;
608+ form . submit ( ) ;
609+ } ) ;
610+ } ) ;
611+ } ) ;
612+ </ script >
613+
614+
615+
616+ </ div >
617+ </ div >
492618 </ nav >
493619</ header >
494620< script src ="{% static 'js/toggles.js' %} "> </ script >
632758 }
633759 } ) ;
634760 } ) ;
761+
635762</ script >
636- < script src ="{% static 'js/search_suggestions.js' %} "> </ script >
763+ < script src ="{% static 'js/search_suggestions.js' %} "> </ script >
764+
765+ </ script>
766+ < script src ="{% static 'js/search_suggestions.js' %} "> </ script >
767+ < style >
768+ /* Keep navbar link text yellow, including when dropdown is expanded */
769+ .navbar .nav-link ,
770+ .navbar .nav-link : hover ,
771+ .navbar .nav-link : focus ,
772+ .navbar .nav-link : active ,
773+ .navbar .nav-link : visited ,
774+ .navbar .nav-link .active ,
775+ .navbar .dropdown-toggle [aria-expanded = "true" ],
776+ .navbar .dropdown-toggle .show {
777+ color : # FFCD11 !important ;
778+ }
779+
780+ /* Ensure icons/arrows inherit the same yellow */
781+ .navbar .nav-link .fas ,
782+ .navbar .nav-link .nav-link-arrow {
783+ color : inherit !important ;
784+ }
785+ </ style >
0 commit comments